From 83815893887b90139bc2a949e83a5191abb626e6 Mon Sep 17 00:00:00 2001
From: mediabot-pt <295750538+mediabot-pt@users.noreply.github.com>
Date: Mon, 6 Jul 2026 23:26:56 +0800
Subject: [PATCH] fix: improve card fold/expand UX - single-click toggle, clear
 text hint

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
---
 web/src/views/RiskRules.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/web/src/views/RiskRules.vue b/web/src/views/RiskRules.vue
index b6ce0df..e12ef29 100644
--- a/web/src/views/RiskRules.vue
+++ b/web/src/views/RiskRules.vue
@@ -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; }