Fix: Optimized the timeline component and parser editing features #9869 (#10268)

### What problem does this PR solve?

Fix: Optimized the timeline component and parser editing features #9869

- Introduced the TimelineNodeType type, restructured the timeline node
structure, and supported dynamic node generation
- Enhanced the FormatPreserveEditor component to support editing and
line wrapping of JSON-formatted content
- Added a rerun function and loading state to the parser and splitter
components
- Adjusted the timeline style and interaction logic to enhance the user
experience
- Improved the modal component and added a destroy method to support
more flexible control
- Optimized the chunk result display and operation logic, supporting
batch deletion and selection
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/originui/timeline.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { cn } from '@/lib/utils';
+import { TimelineNodeType } from '@/pages/dataflow-result/constant';
 import { parseColorToRGB } from '@/utils/common-util';
 import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
@@ -220,6 +221,8 @@ interface TimelineNode
   completed?: boolean;
   clickable?: boolean;
   activeStyle?: TimelineIndicatorNodeProps;
+  detail?: any;
+  type?: TimelineNodeType;
 }
 
 interface CustomTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -252,7 +255,6 @@ const CustomTimeline = ({
   const [internalActiveStep, setInternalActiveStep] =
     React.useState(defaultValue);
   const _lineColor = `rgb(${parseColorToRGB(lineColor)})`;
-  console.log(lineColor, _lineColor);
   const currentActiveStep = activeStep ?? internalActiveStep;
 
   const handleStepChange = (step: number, id: string | number) => {
@@ -284,8 +286,6 @@ const CustomTimeline = ({
           typeof _nodeSizeTemp === 'number'
             ? `${_nodeSizeTemp}px`
             : _nodeSizeTemp;
-        console.log('icon-size', nodeSize, node.nodeSize, _nodeSize);
-        // const activeStyle = _activeStyle || {};
 
         return (
           <TimelineItem
@@ -372,11 +372,10 @@ const CustomTimeline = ({
               )}
             </TimelineIndicator>
 
-            <TimelineHeader>
-              {node.date && <TimelineDate>{node.date}</TimelineDate>}
+            <TimelineHeader className="transform -translate-x-[40%] text-center">
               <TimelineTitle
                 className={cn(
-                  'text-sm font-medium',
+                  'text-sm font-medium -ml-1',
                   isActive && _activeStyle.textColor
                     ? `text-${_activeStyle.textColor}`
                     : '',
@@ -387,6 +386,7 @@ const CustomTimeline = ({
               >
                 {node.title}
               </TimelineTitle>
+              {node.date && <TimelineDate>{node.date}</TimelineDate>}
             </TimelineHeader>
             {node.content && <TimelineContent>{node.content}</TimelineContent>}
           </TimelineItem>

web/src/components/ui/modal/modal.tsx

@@ -31,6 +31,7 @@ export interface ModalProps {
 export interface ModalType extends FC<ModalProps> {
   show: typeof modalIns.show;
   hide: typeof modalIns.hide;
+  destroy: typeof modalIns.destroy;
 }
 
 const Modal: ModalType = ({
@@ -75,13 +76,13 @@ const Modal: ModalType = ({
 
   const handleCancel = useCallback(() => {
     onOpenChange?.(false);
-    // onCancel?.();
-  }, [onOpenChange]);
+    onCancel?.();
+  }, [onCancel, onOpenChange]);
 
   const handleOk = useCallback(() => {
     onOpenChange?.(true);
-    // onOk?.();
-  }, [onOpenChange]);
+    onOk?.();
+  }, [onOk, onOpenChange]);
   const handleChange = (open: boolean) => {
     onOpenChange?.(open);
     console.log('open', open, onOpenChange);
@@ -208,5 +209,6 @@ Modal.show = modalIns
       return modalIns.show;
     };
 Modal.hide = modalIns.hide;
+Modal.destroy = modalIns.destroy;
 
 export { Modal };