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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user