Browse Source

feat(frontend): 溯源卡片展示规则来源文本/取值规则描述

何文松 13 giờ trước cách đây
mục cha
commit
4a59aaa547
1 tập tin đã thay đổi với 39 bổ sung0 xóa
  1. 39 0
      frontend/vue-demo/src/views/Editor.vue

+ 39 - 0
frontend/vue-demo/src/views/Editor.vue

@@ -255,6 +255,9 @@
                       <div v-if="rule.inputs && rule.inputs.length" class="rule-trace-sources">
                         <span v-for="inp in rule.inputs" :key="inp.inputId" class="rule-trace-att">📎 {{ inp.sourceName }}</span>
                       </div>
+                      <div v-if="ruleSourceText(rule)" class="rule-trace-excerpt">
+                        <span class="rule-trace-excerpt-text">{{ ruleSourceText(rule) }}</span>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -1163,6 +1166,23 @@ function ruleActionLabel(actionType) {
   return map[actionType] || actionType
 }
 
+// 从规则中提取来源文本(引用原文 / 规则描述)
+function ruleSourceText(rule) {
+  // 优先从 actionConfig.sourceText 取(前端引用创建的规则)
+  if (rule.actionConfig) {
+    try {
+      const cfg = typeof rule.actionConfig === 'string' ? JSON.parse(rule.actionConfig) : rule.actionConfig
+      if (cfg.sourceText) return cfg.sourceText
+      if (cfg.description) return cfg.description
+    } catch (_) { /* ignore */ }
+  }
+  // 其次取 dslContent(mock 规则的取值规则描述)
+  if (rule.dslContent) return rule.dslContent
+  // 最后取 description
+  if (rule.description) return rule.description
+  return ''
+}
+
 // 构建要素值映射表,分为长文本、短文本、静态文本三类
 function buildElementValueMap() {
   const longTexts = []    // paragraph/table 类型的长文本要素
@@ -5775,6 +5795,25 @@ onMounted(async () => {
             text-overflow: ellipsis;
           }
         }
+
+        .rule-trace-excerpt {
+          margin-top: 4px;
+          padding: 4px 6px;
+          background: #fafafa;
+          border-left: 2px solid #d9d9d9;
+          border-radius: 2px;
+
+          .rule-trace-excerpt-text {
+            font-size: 11px;
+            color: var(--text-2);
+            line-height: 1.5;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            word-break: break-all;
+          }
+        }
       }
     }
   }