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 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"> <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-index">{{ groupIndex + 1 }}</span>
<span class="project-title">{{ group.title }}</span> <span class="project-title">{{ group.title }}</span>
<span class="project-meta">{{ group.type }}</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.items?.length || 0 }}</span>
<span class="project-meta">{{ group.code }}</span> <span class="project-meta">{{ group.code }}</span>
</div> </div>
<div class="project-actions"> <div class="project-actions" @click.stop>
<el-popover <el-popover
placement="bottom" placement="bottom"
:width="200" :width="200"
@@ -111,8 +116,8 @@
</div> </div>
</div> </div>
<!-- 队伍列表 --> <!-- 队伍列表 - 可折叠 -->
<div class="team-list"> <div v-if="isProjectExpanded(group.id)" class="team-list">
<div <div
v-for="(team, teamIndex) in groupItemsByTeam(group.items)" v-for="(team, teamIndex) in groupItemsByTeam(group.items)"
:key="team.id" :key="team.id"
@@ -394,7 +399,8 @@ export default {
// 异常组相关 // 异常组相关
exceptionDialogVisible: false, exceptionDialogVisible: false,
exceptionList: [], // 异常参赛人员列表 exceptionList: [], // 异常参赛人员列表
expandedTeams: {} // 展开的队伍 { 'groupId-teamId': true } expandedTeams: {}, // 展开的队伍 { 'groupId-teamId': true }
expandedProjects: {} // 展开的项目 { 'groupId': true },默认收起
} }
}, },
computed: { computed: {
@@ -460,6 +466,22 @@ export default {
} }
}, },
methods: { 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) { isTeamExpanded(groupId, teamId) {
const key = groupId + '-' + teamId const key = groupId + '-' + teamId
@@ -1280,12 +1302,30 @@ export default {
padding: 12px 16px; padding: 12px 16px;
background: #fafafa; background: #fafafa;
border-bottom: 1px solid #e4e7ed; border-bottom: 1px solid #e4e7ed;
cursor: pointer;
transition: background-color 0.2s;
&:hover {
background: #f0f0f0;
}
&.project-header-collapsed {
border-bottom: none;
}
.project-info { .project-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
.project-expand-icon {
width: 20px;
color: #909399;
display: flex;
align-items: center;
justify-content: center;
}
.project-index { .project-index {
font-weight: 600; font-weight: 600;
color: #e6a23c; color: #e6a23c;