update

examples/process_pipeline/ui/app.js

@@ -2610,7 +2610,7 @@ window.renderStructuredData = function(items, type, parentItem = null) {
         if (item.steps && Array.isArray(item.steps)) {
             const allFragments = (parentItem && parentItem.fragments) || [];
             const escapeHtml = (s) => String(s).replace(/</g, '&lt;').replace(/>/g, '&gt;');
-            const minWidth = 1280;
+            const minWidth = 1250;
             const renderAction = (src) => {
                 if (!src) return '-';
                 if (src.action && src.action.main_action) {
@@ -2626,6 +2626,30 @@ window.renderStructuredData = function(items, type, parentItem = null) {
                 if (!tools || !Array.isArray(tools) || tools.length === 0) return '-';
                 return tools.map(t => `<span class="structured-badge tool-badge" style="display:inline-block; margin:2px;">${escapeHtml(t)}</span>`).join('');
             };
+            const renderEffects = (effects) => {
+                if (!effects || !Array.isArray(effects) || effects.length === 0) return '-';
+                return `<div style="display:flex; flex-direction:column; gap:8px;">${effects.map(effect => {
+                    if (typeof effect === 'string') {
+                        return `<div class="effect-item"><span class="data-type-badge effect-index">效果</span><span>${escapeHtml(effect)}</span></div>`;
+                    }
+                    if (typeof effect !== 'object' || effect === null) return '';
+                    const statement = effect.statement ? escapeHtml(effect.statement) : '效果';
+                    const criteria = effect.criteria ? escapeHtml(effect.criteria) : '';
+                    const judgeMethod = effect.judge_method ? escapeHtml(effect.judge_method) : '';
+                    const negativeExamples = Array.isArray(effect.negative_examples) && effect.negative_examples.length > 0
+                        ? effect.negative_examples.slice(0, 2).map(ex => `<span class="effect-negative">${escapeHtml(ex)}</span>`).join('')
+                        : '';
+                    return `<div class="effect-item">
+                        <div class="effect-content">
+                            <div>${judgeMethod ? `<span class="effect-method">${judgeMethod}</span>` : ''}<span class="effect-statement">${statement}</span></div>
+                            ${criteria ? `<div class="effect-criteria">${criteria}</div>` : ''}
+                            ${negativeExamples ? `<div class="effect-meta">
+                                ${negativeExamples}
+                            </div>` : ''}
+                        </div>
+                    </div>`;
+                }).join('')}</div>`;
+            };
             const getStepFragments = (step) => {
                 if (!step || !step.step_id) return [];
                 return allFragments.filter(f => {
@@ -2642,13 +2666,14 @@ window.renderStructuredData = function(items, type, parentItem = null) {
             const renderFragmentColumns = (fragment) => {
                 const applyTo = fragment && (fragment.apply_to_draft || fragment.apply_to_grounding || fragment.apply_to);
                 return `
-                    <td class="fragment-cell" style="font-family: monospace; color:#4338ca;">
+                    <td class="fragment-cell" style="font-family: monospace;">
                         <span class="row-expand-icon">▶</span>
-                        ${fragment && fragment.fragment_id ? `<span style="display:inline-block; font-weight:bold; background:#e0e7ff; border:1px solid #c7d2fe; padding:2px 6px; border-radius:4px;">${escapeHtml(fragment.fragment_id)}</span>` : '-'}
+                        ${fragment && fragment.fragment_id ? `<span style="display:inline-block; color:#94a3b8; font-size:0.85em; font-weight:400;">${escapeHtml(fragment.fragment_id)}</span>` : '-'}
                     </td>
                     <td class="fragment-cell">${renderAction(fragment)}</td>
                     <td class="fragment-cell">${fragment && fragment.inputs && fragment.inputs.length > 0 ? renderDataObjList(fragment.inputs) : '-'}</td>
                     <td class="fragment-cell">${fragment && fragment.outputs && fragment.outputs.length > 0 ? renderDataObjList(fragment.outputs) : '-'}</td>
+                    <td class="fragment-cell"><div class="fragment-clamp">${fragment ? renderEffects(fragment.effects) : '-'}</div></td>
                     <td class="fragment-cell" style="font-size:0.9em;"><div class="fragment-clamp">${applyTo ? renderApplyToVal(applyTo) : '-'}</div></td>
                     <td class="fragment-cell"><div class="fragment-clamp">${fragment ? renderTools(fragment.tools) : '-'}</div></td>
                     <td class="fragment-cell"><div class="fragment-clamp fragment-text">${fragment && fragment.body ? escapeHtml(fragment.body) : '-'}</div></td>
@@ -2671,16 +2696,25 @@ window.renderStructuredData = function(items, type, parentItem = null) {
                         .steps-table .row-expand-icon { display: inline-block; margin-right: 6px; color: var(--text-muted); font-size: 0.8em; transition: transform 0.2s; }
                         .steps-table tr.fragment-expanded .row-expand-icon { transform: rotate(90deg); }
                         .steps-table .fragment-text { white-space: pre-wrap; word-break: break-word; }
+                        .steps-table .effect-item { padding-bottom:8px; margin-bottom:8px; border-bottom:1px dashed rgba(0,0,0,0.08); color:var(--text-main); line-height:1.5; }
+                        .steps-table .effect-item:last-child { margin-bottom:0; padding-bottom:0; border-bottom:0; }
+                        .steps-table .effect-content { min-width:0; flex:1; }
+                        .steps-table .effect-statement { color:var(--text-main); font-weight:600; }
+                        .steps-table .effect-criteria { margin-top:4px; color:var(--text-secondary); font-size:0.9em; line-height:1.45; }
+                        .steps-table .effect-meta { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; }
+                        .steps-table .effect-method { background:#eef2ff; color:#4338ca; border:1px solid #c7d2fe; border-radius:999px; padding:1px 7px; font-size:0.78em; margin-right:6px; display:inline-block; transform:translateY(-1px); }
+                        .steps-table .effect-negative { background:#f8fafc; color:#64748b; border:1px solid #cbd5e1; border-radius:999px; padding:1px 7px; font-size:0.78em; }
                     </style>
-                    <table class="steps-table" style="width: 100%; min-width: ${minWidth}px; border-collapse: collapse; margin-top: 8px; font-size: 0.9em; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
+                    <table class="steps-table" style="width: 100%; min-width: ${minWidth + 220}px; border-collapse: collapse; margin-top: 8px; font-size: 0.9em; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                         <thead>
                             <tr style="background: rgba(0,0,0,0.03); border-bottom: 2px solid rgba(0,0,0,0.1); text-align: left;">
                                 <th style="padding: 12px 10px; width: 60px;">序号</th>
                                 <th style="padding: 12px 10px; width: 90px;">阶段</th>
-                                <th style="padding: 12px 10px; width: 120px;">Fragment ID</th>
+                                <th style="padding: 12px 8px; width: 90px;"></th>
                                 <th style="padding: 12px 10px; width: 160px;">动作</th>
                                 <th style="padding: 12px 10px; width: 180px;">输入</th>
                                 <th style="padding: 12px 10px; width: 180px;">输出</th>
+                                <th style="padding: 12px 10px; width: 220px;">效果</th>
                                 <th style="padding: 12px 10px; width: 260px;">作用域</th>
                                 <th style="padding: 12px 10px; width: 130px;">工具</th>
                                 <th style="padding: 12px 10px; width: 280px;">做法</th>