feat: 竞赛分组页面项目支持折叠,默认收起

- 点击项目头部可展开/收起队伍列表
- 默认所有项目收起,方便管理多个项目
- 添加展开图标指示当前状态

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
DevOps
2025-12-24 12:55:55 +08:00
parent 352727b4fb
commit e035647b51

View File

@@ -73,9 +73,14 @@
<!-- 项目卡片列表 -->
<div v-for="(group, groupIndex) in filteredCompetitionGroups" :key="group.id" class="project-card">
<!-- 项目头部 -->
<div class="project-header">
<!-- 项目头部 - 可点击展开 -->
<div class="project-header" :class="{ 'project-header-collapsed': !isProjectExpanded(group.id) }" @click="toggleProjectExpand(group.id)">
<div class="project-info">
<!-- 展开图标 -->
<span class="project-expand-icon">
<el-icon v-if="isProjectExpanded(group.id)"><ArrowDown /></el-icon>
<el-icon v-else><ArrowRight /></el-icon>
</span>
<span class="project-index">{{ groupIndex + 1 }}</span>
<span class="project-title">{{ group.title }}</span>
<span class="project-meta">{{ group.type }}</span>
@@ -83,7 +88,7 @@
<span class="project-meta">{{ group.items?.length || 0 }}</span>
<span class="project-meta">{{ group.code }}</span>
</div>
<div class="project-actions">
<div class="project-actions" @click.stop>
<el-popover
placement="bottom"
:width="200"
@@ -111,8 +116,8 @@
</div>
</div>
<!-- 队伍列表 -->
<div class="team-list">
<!-- 队伍列表 - 可折叠 -->
<div v-if="isProjectExpanded(group.id)" class="team-list">
<div
v-for="(team, teamIndex) in groupItemsByTeam(group.items)"
:key="team.id"
@@ -394,7 +399,8 @@ export default {
// 异常组相关
exceptionDialogVisible: false,
exceptionList: [], // 异常参赛人员列表
expandedTeams: {} // 展开的队伍 { 'groupId-teamId': true }
expandedTeams: {}, // 展开的队伍 { 'groupId-teamId': true }
expandedProjects: {} // 展开的项目 { 'groupId': true },默认收起
}
},
computed: {
@@ -460,6 +466,22 @@ export default {
}
},
methods: {
// 检查项目是否展开
isProjectExpanded(groupId) {
return this.expandedProjects[groupId] === true
},
// 切换项目展开状态
toggleProjectExpand(groupId) {
if (this.expandedProjects[groupId]) {
delete this.expandedProjects[groupId]
} else {
this.expandedProjects[groupId] = true
}
// 触发响应式更新
this.expandedProjects = { ...this.expandedProjects }
},
// 检查队伍是否展开
isTeamExpanded(groupId, teamId) {
const key = groupId + '-' + teamId
@@ -1280,12 +1302,30 @@ export default {
padding: 12px 16px;
background: #fafafa;
border-bottom: 1px solid #e4e7ed;
cursor: pointer;
transition: background-color 0.2s;
&:hover {
background: #f0f0f0;
}
&.project-header-collapsed {
border-bottom: none;
}
.project-info {
display: flex;
align-items: center;
gap: 12px;
.project-expand-icon {
width: 20px;
color: #909399;
display: flex;
align-items: center;
justify-content: center;
}
.project-index {
font-weight: 600;
color: #e6a23c;