mirror of
https://github.com/ZeroCatDev/Classworks.git
synced 2025-07-01 16:49:22 +00:00
523 lines
14 KiB
Vue
523 lines
14 KiB
Vue
<template>
|
||
<v-dialog v-model="dialog" max-width="600" fullscreen-breakpoint="sm">
|
||
<v-card class="random-picker-card">
|
||
<v-card-title class="text-h5 d-flex align-center">
|
||
<v-icon icon="mdi-account-question" class="mr-2" />
|
||
随机点名
|
||
<v-spacer />
|
||
<v-btn icon="mdi-close" variant="text" @click="dialog = false" />
|
||
</v-card-title>
|
||
|
||
<v-card-text v-if="!isPickingStarted" class="text-center py-6">
|
||
<div class="text-h6 mb-4">请选择抽取人数</div>
|
||
|
||
<div class="d-flex justify-center align-center counter-container">
|
||
<v-btn size="x-large" icon="mdi-minus" variant="tonal" color="primary" :disabled="count <= 1"
|
||
@click="decrementCount" class="counter-btn" />
|
||
|
||
<div class="count-display mx-8">
|
||
<span class="text-h2 font-weight-bold">{{ count }}</span>
|
||
<span class="text-subtitle-1 ml-2">人</span>
|
||
</div>
|
||
|
||
<v-btn size="x-large" icon="mdi-plus" variant="tonal" color="primary" :disabled="count >= maxAllowedCount"
|
||
@click="incrementCount" class="counter-btn" />
|
||
</div>
|
||
|
||
|
||
|
||
<div class="mt-4">
|
||
<v-btn size="x-large" color="primary" prepend-icon="mdi-dice-multiple" @click="startPicking"
|
||
:disabled="filteredStudents.length === 0" class="start-btn">
|
||
开始抽取
|
||
</v-btn>
|
||
</div>
|
||
|
||
<div v-if="filteredStudents.length === 0" class="mt-4 text-error">
|
||
没有可抽取的学生，请调整过滤选项
|
||
</div>
|
||
|
||
<div class="mt-4 text-caption">
|
||
当前可抽取学生: {{ filteredStudents.length }}人
|
||
<v-tooltip location="bottom">
|
||
<template v-slot:activator="{ props }">
|
||
<v-icon v-bind="props" icon="mdi-information-outline" size="small" class="ml-1" />
|
||
</template>
|
||
<div class="pa-2">
|
||
<div v-if="tempFilters.excludeAbsent">• 已排除请假学生 ({{ absentCount }}人)</div>
|
||
<div v-if="tempFilters.excludeLate">• 已排除迟到学生 ({{ lateCount }}人)</div>
|
||
<div v-if="tempFilters.excludeExcluded">• 已排除不参与学生 ({{ excludedCount }}人)</div>
|
||
</div>
|
||
</v-tooltip><!-- 添加临时过滤选项 -->
|
||
|
||
<div class="d-flex flex-wrap justify-center gap-2 mt-4">
|
||
<v-chip :color="tempFilters.excludeLate ? 'warning' : 'default'"
|
||
:variant="tempFilters.excludeLate ? 'elevated' : 'text'"
|
||
@click="tempFilters.excludeLate = !tempFilters.excludeLate" prepend-icon="mdi-clock-alert"
|
||
class="filter-chip">
|
||
{{ tempFilters.excludeLate ? '排除' : '包含' }}迟到学生
|
||
</v-chip>
|
||
<v-chip :color="tempFilters.excludeAbsent ? 'error' : 'default'"
|
||
:variant="tempFilters.excludeAbsent ? 'elevated' : 'text'"
|
||
@click="tempFilters.excludeAbsent = !tempFilters.excludeAbsent" prepend-icon="mdi-account-off"
|
||
class="filter-chip">
|
||
{{ tempFilters.excludeAbsent ? '排除' : '包含' }}请假学生
|
||
</v-chip>
|
||
|
||
|
||
|
||
<v-chip :color="tempFilters.excludeExcluded ? 'grey' : 'default'"
|
||
:variant="tempFilters.excludeExcluded ? 'elevated' : 'text'"
|
||
@click="tempFilters.excludeExcluded = !tempFilters.excludeExcluded" prepend-icon="mdi-account-cancel"
|
||
class="filter-chip">
|
||
{{ tempFilters.excludeExcluded ? '排除' : '包含' }}不参与学生
|
||
</v-chip>
|
||
</div>
|
||
</div>
|
||
</v-card-text>
|
||
|
||
<v-card-text v-else class="text-center py-6">
|
||
<div v-if="isAnimating" class="animation-container">
|
||
<div class="animation-wrapper">
|
||
<transition-group name="shuffle" tag="div" class="shuffle-container">
|
||
<div v-for="(student, index) in animationStudents" :key="student.id" class="student-item"
|
||
:class="{ 'highlighted': highlightedIndices.includes(index) }">
|
||
{{ student.name }}
|
||
</div>
|
||
</transition-group>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="result-container">
|
||
<div class="text-h6 mb-4">抽取结果</div>
|
||
<v-card v-for="(student, index) in pickedStudents" :key="index" variant="outlined" color="primary"
|
||
class="mb-2 result-card">
|
||
<v-card-text class="text-h4 text-center py-4 d-flex align-center justify-center">
|
||
{{ student }}
|
||
<v-btn icon="mdi-refresh" variant="text" size="small" class="ml-2 refresh-btn"
|
||
@click="refreshSingleStudent(index)" :disabled="remainingStudents.length === 0"
|
||
:title="remainingStudents.length === 0 ? '没有更多可用学生' : '重新抽取此学生'" />
|
||
</v-card-text>
|
||
</v-card>
|
||
|
||
<div class="mt-8 d-flex justify-center">
|
||
<v-btn color="primary" prepend-icon="mdi-refresh" @click="resetPicker" size="large" class="mx-2">
|
||
重新抽取
|
||
</v-btn>
|
||
<v-btn color="grey" variant="outlined" @click="dialog = false" size="large" class="mx-2">
|
||
关闭
|
||
</v-btn>
|
||
</div>
|
||
</div>
|
||
</v-card-text>
|
||
</v-card>
|
||
</v-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { getSetting } from '@/utils/settings';
|
||
|
||
export default {
|
||
name: 'RandomPicker',
|
||
props: {
|
||
studentList: {
|
||
type: Array,
|
||
required: true
|
||
},
|
||
attendance: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({ absent: [], late: [], exclude: [] })
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
dialog: false,
|
||
count: getSetting('randomPicker.defaultCount'),
|
||
isPickingStarted: false,
|
||
isAnimating: false,
|
||
pickedStudents: [],
|
||
animationStudents: [],
|
||
highlightedIndices: [],
|
||
animationTimer: null,
|
||
getSetting,
|
||
// 添加临时过滤选项
|
||
tempFilters: {
|
||
excludeAbsent: getSetting('randomPicker.excludeAbsent'),
|
||
excludeLate: getSetting('randomPicker.excludeLate'),
|
||
excludeExcluded: getSetting('randomPicker.excludeExcluded')
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
// 计算请假、迟到、不参与的学生数量
|
||
absentCount() {
|
||
return this.attendance.absent ? this.attendance.absent.length : 0;
|
||
},
|
||
lateCount() {
|
||
return this.attendance.late ? this.attendance.late.length : 0;
|
||
},
|
||
excludedCount() {
|
||
return this.attendance.exclude ? this.attendance.exclude.length : 0;
|
||
},
|
||
|
||
// 使用临时过滤选项过滤学生
|
||
filteredStudents() {
|
||
if (!this.studentList || !this.studentList.length) return [];
|
||
|
||
return this.studentList.filter(student => {
|
||
// 根据临时过滤选项过滤学生
|
||
if (this.tempFilters.excludeAbsent && this.attendance.absent.includes(student)) {
|
||
return false;
|
||
}
|
||
if (this.tempFilters.excludeLate && this.attendance.late.includes(student)) {
|
||
return false;
|
||
}
|
||
if (this.tempFilters.excludeExcluded && this.attendance.exclude.includes(student)) {
|
||
return false;
|
||
}
|
||
return true;
|
||
});
|
||
},
|
||
|
||
// 兼容性：保留原有的 availableStudents 计算属性，但使用新的过滤逻辑
|
||
availableStudents() {
|
||
return this.filteredStudents;
|
||
},
|
||
|
||
maxAllowedCount() {
|
||
return Math.min(10, this.filteredStudents.length);
|
||
},
|
||
|
||
// 计算剩余可用学生（排除已抽取的学生）
|
||
remainingStudents() {
|
||
return this.filteredStudents.filter(student => !this.pickedStudents.includes(student));
|
||
}
|
||
},
|
||
watch: {
|
||
dialog(newVal) {
|
||
if (newVal) {
|
||
// 打开对话框时重置状态
|
||
this.count = getSetting('randomPicker.defaultCount');
|
||
this.isPickingStarted = false;
|
||
this.isAnimating = false;
|
||
this.pickedStudents = [];
|
||
|
||
// 重置临时过滤选项为设置中的值
|
||
this.tempFilters = {
|
||
excludeAbsent: getSetting('randomPicker.excludeAbsent'),
|
||
excludeLate: getSetting('randomPicker.excludeLate'),
|
||
excludeExcluded: getSetting('randomPicker.excludeExcluded')
|
||
};
|
||
} else {
|
||
// 关闭对话框时清除计时器
|
||
if (this.animationTimer) {
|
||
clearTimeout(this.animationTimer);
|
||
this.animationTimer = null;
|
||
}
|
||
}
|
||
},
|
||
|
||
// 监听过滤选项变化，确保count不超过可用学生数
|
||
'tempFilters': {
|
||
handler() {
|
||
if (this.count > this.maxAllowedCount) {
|
||
this.count = Math.max(1, this.maxAllowedCount);
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
open() {
|
||
this.dialog = true;
|
||
},
|
||
incrementCount() {
|
||
if (this.count < this.maxAllowedCount) {
|
||
this.count++;
|
||
}
|
||
},
|
||
decrementCount() {
|
||
if (this.count > 1) {
|
||
this.count--;
|
||
}
|
||
},
|
||
startPicking() {
|
||
if (this.filteredStudents.length === 0) return;
|
||
|
||
this.isPickingStarted = true;
|
||
|
||
if (getSetting('randomPicker.animation')) {
|
||
this.startAnimation();
|
||
} else {
|
||
this.finishPicking();
|
||
}
|
||
},
|
||
startAnimation() {
|
||
this.isAnimating = true;
|
||
|
||
// 创建动画用的学生列表（添加ID以便于动画）
|
||
this.animationStudents = this.filteredStudents.map((name, index) => ({
|
||
id: `student-${index}`,
|
||
name
|
||
}));
|
||
|
||
// 随机高亮显示
|
||
this.animateHighlight();
|
||
},
|
||
animateHighlight() {
|
||
const totalSteps = 5; // 动画总步数
|
||
let currentStep = 0;
|
||
const intervalTime = 50; // 初始间隔时间
|
||
|
||
const animate = () => {
|
||
// 清除之前的高亮
|
||
this.highlightedIndices = [];
|
||
|
||
// 随机选择要高亮的索引
|
||
const indices = [];
|
||
for (let i = 0; i < this.count; i++) {
|
||
let randomIndex;
|
||
do {
|
||
randomIndex = Math.floor(Math.random() * this.animationStudents.length);
|
||
} while (indices.includes(randomIndex));
|
||
indices.push(randomIndex);
|
||
}
|
||
|
||
this.highlightedIndices = indices;
|
||
|
||
currentStep++;
|
||
|
||
// 逐渐增加间隔时间，使动画变慢
|
||
const nextInterval = intervalTime + (currentStep * 20);
|
||
|
||
if (currentStep < totalSteps) {
|
||
this.animationTimer = setTimeout(animate, nextInterval);
|
||
} else {
|
||
// 动画结束，显示最终结果
|
||
setTimeout(() => {
|
||
this.finishPicking();
|
||
}, 500);
|
||
}
|
||
};
|
||
|
||
// 开始动画
|
||
animate();
|
||
},
|
||
finishPicking() {
|
||
this.isAnimating = false;
|
||
|
||
// 随机选择学生
|
||
const shuffled = [...this.filteredStudents].sort(() => 0.5 - Math.random());
|
||
this.pickedStudents = shuffled.slice(0, this.count);
|
||
},
|
||
resetPicker() {
|
||
this.isPickingStarted = false;
|
||
this.isAnimating = false;
|
||
this.pickedStudents = [];
|
||
if (this.animationTimer) {
|
||
clearTimeout(this.animationTimer);
|
||
this.animationTimer = null;
|
||
}
|
||
},
|
||
// 刷新单个学生
|
||
refreshSingleStudent(index) {
|
||
if (this.remainingStudents.length === 0) return;
|
||
|
||
// 从剩余学生中随机选择一个
|
||
const randomIndex = Math.floor(Math.random() * this.remainingStudents.length);
|
||
const newStudent = this.remainingStudents[randomIndex];
|
||
|
||
// 替换指定位置的学生
|
||
this.pickedStudents[index] = newStudent;
|
||
|
||
// 添加动画效果
|
||
const resultCards = document.querySelectorAll('.result-card');
|
||
if (resultCards[index]) {
|
||
resultCards[index].classList.add('refresh-animation');
|
||
setTimeout(() => {
|
||
resultCards[index].classList.remove('refresh-animation');
|
||
}, 500);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.random-picker-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.counter-container {
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.counter-btn {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.count-display {
|
||
min-width: 100px;
|
||
text-align: center;
|
||
}
|
||
|
||
.start-btn {
|
||
min-width: 200px;
|
||
height: 64px;
|
||
border-radius: 32px;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
// 过滤选项卡片样式
|
||
.filter-options-card {
|
||
max-width: 450px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.filter-chip {
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
|
||
// 学生列表提示框样式
|
||
.student-list-tooltip {
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
margin-top: 5px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.animation-container {
|
||
min-height: 300px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.animation-wrapper {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.shuffle-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.student-item {
|
||
padding: 10px 15px;
|
||
background-color: rgba(var(--v-theme-surface-variant), 0.7);
|
||
border-radius: 8px;
|
||
transition: all 0.3s ease;
|
||
font-size: 1.2rem;
|
||
|
||
&.highlighted {
|
||
background-color: rgb(var(--v-theme-primary));
|
||
color: rgb(var(--v-theme-on-primary));
|
||
transform: scale(1.1);
|
||
font-weight: bold;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
}
|
||
}
|
||
|
||
.result-container {
|
||
min-height: 300px;
|
||
}
|
||
|
||
.result-card {
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
transition: transform 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: translateY(-4px);
|
||
|
||
.refresh-btn {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.refresh-btn {
|
||
opacity: 0.7;
|
||
transition: opacity 0.3s ease;
|
||
|
||
&:hover {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
// 刷新动画
|
||
@keyframes refresh-pulse {
|
||
0% {
|
||
transform: scale(1);
|
||
box-shadow: 0 0 0 rgba(var(--v-theme-primary), 0.5);
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 0 15px rgba(var(--v-theme-primary), 0.7);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1);
|
||
box-shadow: 0 0 0 rgba(var(--v-theme-primary), 0.5);
|
||
}
|
||
}
|
||
|
||
.refresh-animation {
|
||
animation: refresh-pulse 0.5s ease;
|
||
}
|
||
|
||
// 动画效果
|
||
.shuffle-enter-active,
|
||
.shuffle-leave-active {
|
||
transition: all 0.5s ease;
|
||
}
|
||
|
||
.shuffle-enter-from,
|
||
.shuffle-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
|
||
.shuffle-move {
|
||
transition: transform 0.5s ease;
|
||
}
|
||
|
||
// 触摸屏优化
|
||
@media (hover: none) {
|
||
|
||
.counter-btn,
|
||
.start-btn {
|
||
min-height: 72px;
|
||
}
|
||
|
||
.student-item {
|
||
padding: 12px 20px;
|
||
font-size: 1.4rem;
|
||
}
|
||
|
||
.refresh-btn {
|
||
opacity: 1;
|
||
min-width: 36px;
|
||
min-height: 36px;
|
||
}
|
||
|
||
.filter-chip {
|
||
min-height: 40px;
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
</style> |