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