yescent/par
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve card fold/expand UX - single-click toggle, clear text hint

Browse Source 
Click anywhere on header to toggle fold/expand

Right side shows '\u5c55\u5f00' or '\u6536\u8d77' text instead of tiny arrow icon

Drag handle icon stops click propagation to prevent accidental fold

Delete button uses stopPropagation to avoid triggering fold
This commit is contained in:
mediabot-pt
2026-07-06 23:26:56 +08:00
parent 1c06be991d
commit 8381589388
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/views/RiskRules.vue
View File

@@ -82,9 +82,9 @@
@drop="onDrop($event, idx)"
>
<!-- 卡片头部 -->
<div class="card-header" @dblclick="rule._fold = !rule._fold">
<div class="card-header" @click="rule._fold = !rule._fold" :class="{folded:rule._fold}">
<div class="card-header-left">
<el-icon class="drag-handle"><Rank /></el-icon>
<el-icon class="drag-handle" @click.stop><Rank /></el-icon>
<span class="type-tag">{{ typeLabel(rule.type) }}</span>
<span v-if="rule.type==='TASK'" class="rule-fixed-text">考核周期 {{ rule.threshold }}天</span>
<span v-else-if="rule.type==='DRATIO'" class="rule-fixed-text">下载量分级控制（{{ (rule.levels||[]).length }} 级）</span>
@@ -96,10 +96,8 @@
</div>
<div class="card-header-right">
<span class="rule-index">#{{ idx + 1 }}</span>
<el-button size="small" text @click="rule._fold = !rule._fold">
<el-icon><component :is="rule._fold ? 'ArrowDown' : 'ArrowUp'" /></el-icon>
</el-button>
<el-button size="small" type="danger" text @click="confirmRemove(idx)" :icon="Delete" circle />
<span class="fold-hint">{{ rule._fold ? '展开' : '收起' }}</span>
<el-button size="small" type="danger" text @click.stop="confirmRemove(idx)" :icon="Delete" circle />
</div>
</div>
@@ -182,7 +180,7 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { ArrowDown, ArrowUp, Rank, Delete, Refresh, Plus } from '@element-plus/icons-vue'
import { ArrowDown, Rank, Delete, Refresh, Plus } from '@element-plus/icons-vue'
import api from '../api'
// ============ 选项配置 ============
@@ -455,10 +453,15 @@ onMounted(fetchAll)
.card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px; gap: 8px; user-select: none;
cursor: pointer;
}
.card-header.folded {
border-bottom: none;
}
.card-header-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.card-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.drag-handle { cursor: grab; color: #c0c4cc; font-size: 16px; }
.fold-hint { font-size: 11px; color: #909399; min-width: 28px; }
.drag-handle:active { cursor: grabbing; }
.rule-index { font-size: 11px; color: #c0c4cc; font-weight: 500; min-width: 24px; text-align: right; }