elksmmx 1 day ago
parent
commit
2e72e23b59
1 changed files with 8 additions and 20 deletions
  1. 8 20
      examples/process_pipeline/ui/app.js

+ 8 - 20
examples/process_pipeline/ui/app.js

@@ -941,9 +941,9 @@ function renderAggregatedPerCaseData(cases, type) {
         return '<div style="color:var(--text-muted); padding: 1rem; text-align: center;">暂无案例数据</div>';
         return '<div style="color:var(--text-muted); padding: 1rem; text-align: center;">暂无案例数据</div>';
     }
     }
     
     
-    let sidebarHtml = `<div class="case-sidebar" style="width: 280px; flex-shrink: 0; position: sticky; top: 0; align-self: flex-start; height: calc(100vh - 100px); overflow-y: auto; background: #fff;">`;
-    sidebarHtml += `<div class="sidebar-nav-list">`;
-    let contentHtml = `<div class="case-content-area" style="flex: 1; min-width: 0; padding-left: 2rem; padding-right: 2rem; border-left: 1px solid #f1f3f4; margin-left: -1px;">`;
+    let sidebarHtml = `<div class="case-sidebar" style="width: 56px; flex-shrink: 0; position: sticky; top: 0; align-self: flex-start; height: calc(100vh - 100px); overflow-y: auto; background: #fff;">`;
+    sidebarHtml += `<div class="sidebar-nav-list" style="padding: 6px;">`;
+    let contentHtml = `<div class="case-content-area" style="flex: 1; min-width: 0; padding-left: 1.25rem; padding-right: 2rem; border-left: 1px solid #f1f3f4; margin-left: -1px;">`;
     let hasData = false;
     let hasData = false;
     let displayIndex = 1;
     let displayIndex = 1;
     
     
@@ -961,36 +961,24 @@ function renderAggregatedPerCaseData(cases, type) {
         
         
         const targetId = `case-${type}-${idx}`;
         const targetId = `case-${type}-${idx}`;
         
         
-        let displayFilename = (c._raw && c._raw.filename) ? c._raw.filename : '';
-        let metaStr = `${displayIndex++}`;
-        if (displayFilename) {
-            metaStr += ` &middot; ${displayFilename}`;
-        } else {
-            metaStr += ` &middot; index #${idx + 1}`;
-        }
+        const navIndex = displayIndex++;
         
         
         let publishStrHtml = '';
         let publishStrHtml = '';
         if (c.published_at) {
         if (c.published_at) {
             const dateObj = new Date(c.published_at);
             const dateObj = new Date(c.published_at);
             const dateStr = isNaN(dateObj.getTime()) ? c.published_at : dateObj.toLocaleString('zh-CN', {year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit'});
             const dateStr = isNaN(dateObj.getTime()) ? c.published_at : dateObj.toLocaleString('zh-CN', {year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit'});
-            metaStr += ` &middot; ${dateStr.split(' ')[0]}`;
             publishStrHtml = `<span style="font-size: 0.75em; font-weight: normal; color: #94a3b8; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 2px 8px; border-radius: 12px; margin-left: 8px;">发布于: ${dateStr}</span>`;
             publishStrHtml = `<span style="font-size: 0.75em; font-weight: normal; color: #94a3b8; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 2px 8px; border-radius: 12px; margin-left: 8px;">发布于: ${dateStr}</span>`;
         }
         }
         
         
         const typeLabel = type === 'workflow' ? '工序' : '能力';
         const typeLabel = type === 'workflow' ? '工序' : '能力';
-        const itemsCountStr = items ? (type === 'workflow' ? '1' : String(items.length)) : '0';
         
         
         // Add to sidebar
         // Add to sidebar
-        sidebarHtml += `<div class="sidebar-nav-item" onclick="
+        sidebarHtml += `<div class="sidebar-nav-item" title="${title.replace(/"/g, '&quot;')}" style="min-height: 34px; padding: 0; margin-bottom: 6px; display:flex; align-items:center; justify-content:center; font-family: monospace; font-weight: 700; color:#64748b;" onclick="
             document.querySelectorAll('.sidebar-nav-item').forEach(el => el.classList.remove('active'));
             document.querySelectorAll('.sidebar-nav-item').forEach(el => el.classList.remove('active'));
             this.classList.add('active');
             this.classList.add('active');
             document.getElementById('${targetId}').scrollIntoView({behavior: 'smooth'})
             document.getElementById('${targetId}').scrollIntoView({behavior: 'smooth'})
         ">
         ">
-            <div class="sidebar-nav-meta">
-                <span>${metaStr}</span>
-                <span class="sidebar-nav-badge">${typeLabel} ${itemsCountStr}</span>
-            </div>
-            <div class="sidebar-nav-title" title="${title.replace(/"/g, '&quot;')}">${title.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
+            ${navIndex}
         </div>`;
         </div>`;
         
         
         contentHtml += `<div id="${targetId}" class="case-section" style="margin-bottom: 3.5rem; padding-top: 1rem;">`;
         contentHtml += `<div id="${targetId}" class="case-section" style="margin-bottom: 3.5rem; padding-top: 1rem;">`;
@@ -2641,7 +2629,7 @@ window.renderStructuredData = function(items, type, parentItem = null) {
                         : '';
                         : '';
                     return `<div class="effect-item">
                     return `<div class="effect-item">
                         <div class="effect-content">
                         <div class="effect-content">
-                            <div>${judgeMethod ? `<span class="effect-method">${judgeMethod}</span>` : ''}<span class="effect-statement">${statement}</span></div>
+                            <div>${judgeMethod ? `<span class="data-type-badge effect-method">${judgeMethod}</span>` : ''}<span class="effect-statement">${statement}</span></div>
                             ${criteria ? `<div class="effect-criteria">${criteria}</div>` : ''}
                             ${criteria ? `<div class="effect-criteria">${criteria}</div>` : ''}
                             ${negativeExamples ? `<div class="effect-meta">
                             ${negativeExamples ? `<div class="effect-meta">
                                 ${negativeExamples}
                                 ${negativeExamples}
@@ -2702,7 +2690,7 @@ window.renderStructuredData = function(items, type, parentItem = null) {
                         .steps-table .effect-statement { color:var(--text-main); font-weight:600; }
                         .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-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-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-method { background:#e0e7ff; color:#3730a3; font-weight:normal; margin-right:6px; margin-bottom:2px; 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; }
                         .steps-table .effect-negative { background:#f8fafc; color:#64748b; border:1px solid #cbd5e1; border-radius:999px; padding:1px 7px; font-size:0.78em; }
                     </style>
                     </style>
                     <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);">
                     <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);">