Просмотр исходного кода

feat: 支持父级 trace 显示并优化界面

- 在 TraceListItem 接口中添加 parent_trace_id 字段以支持父子 trace 关系
- 修改 TopBar 组件,优先使用父级 trace_id 进行展示
- 移除 DetailPanel 中消息列表的高度限制,允许完整滚动
- 清理 Edge 组件中调试用的 console.log 语句
- 临时硬编码 trace_id 用于开发调试
max_liu 4 недель назад
Родитель
Сommit
e536a373a3

+ 2 - 1
frontend/htmlTemplate/templateData.py

@@ -294,7 +294,8 @@ if __name__ == "__main__":
         print(f"🐒trace_list_data: {trace_list_data}")
 
         traces = trace_list_data.get("traces") or []
-        trace_id = traces[0].get("trace_id") if traces else None
+        # trace_id = traces[0].get("trace_id") if traces else None
+        trace_id = "eb3aa9f6-37d4-4888-96ba-a9b9c5a4766b"
         if trace_id:
             if args.watch:
                 print(f"✅使用 trace_id 监听: {trace_id}")

+ 2 - 3
frontend/react-template/src/components/DetailPanel/DetailPanel.module.css

@@ -1,5 +1,6 @@
 .panel {
   width: 100%;
+  height: 100%;
   /* border-left: 1px solid var(--border-color, #e0e0e0); */
   background: #ffffff;
   display: flex;
@@ -109,9 +110,7 @@
 }
 
 .messageList {
-  max-height: 400px;
-  overflow-y: auto;
-  padding-right: 4px; /* Space for scrollbar */
+  /* max-height removed to allow full content scrolling */
 }
 
 /* Custom scrollbar for message list */

+ 14 - 16
frontend/react-template/src/components/DetailPanel/DetailPanel.tsx

@@ -84,23 +84,21 @@ export const DetailPanel = ({ node, edge, messages = [], onClose }: DetailPanelP
         {messages && messages.length > 0 && (
           <div className={styles.messages}>
             <div className={styles.sectionTitle}>边</div>
-            <div className={styles.messageList}>
-              {messages.map((msg, idx) => (
-                <div
-                  key={msg.id || idx}
-                  className={styles.messageItem}
-                >
-                  <div className={styles.section}>
-                    <div className={styles.label}>描述</div>
-                    <div className={styles.value}>{msg.description || "-"}</div>
-                  </div>
-                  <div className={styles.section}>
-                    <div className={styles.label}>内容</div>
-                    <div className={styles.value}>{renderMessageContent(msg.content)}</div>
-                  </div>
+            {messages.map((msg, idx) => (
+              <div
+                key={msg.id || idx}
+                className={styles.messageItem}
+              >
+                <div className={styles.section}>
+                  <div className={styles.label}>描述</div>
+                  <div className={styles.value}>{msg.description || "-"}</div>
                 </div>
-              ))}
-            </div>
+                <div className={styles.section}>
+                  <div className={styles.label}>内容</div>
+                  <div className={styles.value}>{renderMessageContent(msg.content)}</div>
+                </div>
+              </div>
+            ))}
           </div>
         )}
       </div>

+ 0 - 1
frontend/react-template/src/components/FlowChart/components/Edge.tsx

@@ -17,7 +17,6 @@ interface EdgeProps {
 export const Edge: FC<EdgeProps> = ({ link, label, highlighted, dimmed, onClick, mode = "line" }) => {
   const { source, target } = link;
   const truncateMiddle = (text: string, limit: number) => {
-    console.log("%c [ text ]-20", "font-size:13px; background:pink; color:#bf2c9f;", text);
     if (text.length <= limit) return text;
     return `${text.slice(0, 2)}...${text.slice(-2)}`;
   };

+ 3 - 1
frontend/react-template/src/components/TopBar/TopBar.tsx

@@ -21,9 +21,11 @@ export const TopBar: FC<TopBarProps> = ({ onTraceSelect }) => {
           limit: 20,
         });
         const firstTrace = data.traces[0];
+        const traceId = firstTrace?.parent_trace_id || firstTrace.trace_id;
+        console.log("%c [ firstTrace ]-24", "font-size:13px; background:pink; color:#bf2c9f;", firstTrace);
         if (firstTrace) {
           setTitle(firstTrace.task);
-          onTraceSelect(firstTrace.trace_id);
+          onTraceSelect(traceId);
         } else {
           setTitle("流程图可视化系统");
           onTraceSelect("");

+ 1 - 0
frontend/react-template/src/types/trace.ts

@@ -10,6 +10,7 @@ export interface TraceListItem {
   total_cost: number;
   current_goal_id: string;
   created_at: string;
+  parent_trace_id: string | null;
 }
 
 export interface TraceListResponse {