瀏覽代碼

feat: 优化要素弹窗交互 - 删除从附件引用按钮,规则卡片可点击跳转

- 删除要素弹窗中的「从附件引用」按钮
- 规则卡片添加点击事件,可跳转到工作流编辑页
- 优化规则卡片样式:添加 hover 效果、渐变背景、动画
- 附件链接添加 .stop 修饰符防止事件冒泡
- 新增 openRuleWorkflow 函数处理规则卡片点击
何文松 21 小時之前
父節點
當前提交
6c50d4906d
共有 1 個文件被更改,包括 24 次插入6 次删除
  1. 24 6
      frontend/vue-demo/src/views/Editor.vue

+ 24 - 6
frontend/vue-demo/src/views/Editor.vue

@@ -248,7 +248,9 @@
                   <div
                     v-for="rule in popoverRelatedRules"
                     :key="rule.id"
-                    class="rule-trace-card"
+                    class="rule-trace-card clickable"
+                    @click="openRuleWorkflow(rule)"
+                    title="点击编辑规则"
                   >
                     <span class="rule-trace-action" :class="'action-' + rule.actionType">{{ ruleActionLabel(rule.actionType) }}</span>
                     <div class="rule-trace-info">
@@ -258,7 +260,7 @@
                           v-for="inp in rule.inputs" 
                           :key="inp.inputId" 
                           class="rule-trace-att clickable"
-                          @click="openSourceInViewer(inp, rule)"
+                          @click.stop="openSourceInViewer(inp, rule)"
                           title="点击查看来源"
                         >📎 {{ formatInputSource(inp) }}</span>
                       </div>
@@ -276,7 +278,6 @@
               </div>
               <div class="popover-footer">
                 <el-button size="small" @click="highlightPopover.visible = false">关闭</el-button>
-                <el-button size="small" @click="enterReferenceModeFromPopover">📎 从附件引用</el-button>
                 <el-button size="small" type="primary" @click="savePopoverValue">保存</el-button>
               </div>
             </div>
@@ -1454,6 +1455,14 @@ async function openWorkflowForRule(rule) {
   }
 }
 
+// 从弹窗中打开规则工作流编辑器
+async function openRuleWorkflow(rule) {
+  // 关闭弹窗
+  highlightPopover.value.visible = false
+  // 复用现有的打开工作流函数
+  await openWorkflowForRule(rule)
+}
+
 function normalizeRuleSourceName(name) {
   const s = String(name || '').trim()
   if (!s) return ''
@@ -6982,13 +6991,22 @@ onMounted(async () => {
       display: flex;
       align-items: flex-start;
       gap: 8px;
-      padding: 6px 8px;
+      padding: 8px 10px;
       background: var(--bg);
-      border-radius: var(--radius-sm);
-      border: 1px solid var(--border);
+      border-radius: 8px;
+      border: 1.5px solid var(--border);
       margin-bottom: 6px;
+      cursor: pointer;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 
       &:last-child { margin-bottom: 0; }
+      
+      &:hover {
+        background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
+        border-color: #409eff;
+        transform: translateX(2px);
+        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
+      }
 
       .rule-trace-action {
         flex-shrink: 0;