update

frontend/src/components/Outline/Cards.tsx

@@ -8,6 +8,7 @@ import RemoveIcon from '@mui/icons-material/Remove';
 import AdjustIcon from '@mui/icons-material/Adjust';
 import { ObjectProps, ProcessProps } from './interface';
 import AgentIcon from '@/components/AgentIcon';
+import DescriptionCard from '@/components/ProcessDiscription/DescriptionCard';
 import { globalStorage } from '@/storage';
 
 export interface IEditObjectProps {
@@ -329,6 +330,13 @@ export const ProcessCard: React.FC<IProcessCardProps> = React.memo(
                   // handleEditStep(step.name, { ...step, task: text });
                 }}
               />
+              {/* 这里直接渲染对应的 DescriptionCard */}
+              {/* {(() => {
+                const step = globalStorage.planManager.currentPlan.find(
+                  s => s.id === process.id
+                );
+                return step ? <DescriptionCard step={step} /> : null;
+              })()} */}
             </Box>
           )}
         </Box>

frontend/src/components/Outline/D3Graph.tsx

@@ -118,10 +118,10 @@ const D3Graph: React.FC<D3GraphProps> = ({
           stepName: stepCardName,
           objectName: objectCardName,
           type,
-          x1: objectRect.left + objectRect.width,
-          y1: objectRect.top + 0.5 * objectRect.height,
-          x2: stepRect.left,
-          y2: stepRect.top + 0.5 * stepRect.height,
+          x1: stepRect.left + stepRect.width,
+          y1: stepRect.top + 0.5 * stepRect.height,
+          x2: objectRect.left,
+          y2: objectRect.top + 0.5 * objectRect.height,
         };
       });
     const objectMetrics = calculateLineMetrics(cardRect, 'object');
@@ -152,17 +152,17 @@ const D3Graph: React.FC<D3GraphProps> = ({
         userSelect: 'none',
       }}
     >
-      <marker
-        id="arrowhead"
-        markerWidth="4"
-        markerHeight="4"
-        refX="2"
-        refY="2"
-        orient="auto"
-        markerUnits="strokeWidth"
-      >
-        <path d="M0,0 L4,2 L0,4 z" fill="#E5E5E5" />
-      </marker>
+<marker
+  id="arrowhead"
+  markerWidth="2" 
+  markerHeight="2" 
+  refX="1"        
+  refY="1"
+  orient="auto"
+  markerUnits="strokeWidth"
+>
+  <path d="M0,0 L2,1 L0,2 z" fill="#E5E5E5" />
+</marker>
       <marker
         id="starter"
         markerWidth="4"
@@ -184,7 +184,7 @@ const D3Graph: React.FC<D3GraphProps> = ({
           fill="#898989"
           fontWeight="800"
         >
-          Key Object
+          产出
         </text>
         <line
           x1={objectLine.x}
@@ -204,7 +204,7 @@ const D3Graph: React.FC<D3GraphProps> = ({
           fill="#898989"
           fontWeight="800"
         >
-          Process
+          流程
         </text>
         <line
           x1={processLine.x}

frontend/src/components/Outline/OutlineView.tsx

@@ -53,7 +53,7 @@ export default observer(() => {
   const handleEditContent = (stepTaskId: string, newContent: string) => {
     globalStorage.setStepTaskContent(stepTaskId, newContent);
   };
-  const WidthRatio = ['30%', '15%', '52.5%'];
+  const WidthRatio = ['35%', '10%', '50%'];
 
   const [cardRefMapReady, setCardRefMapReady] = React.useState(false);
 
@@ -175,6 +175,34 @@ export default observer(() => {
                 sx={{ display: 'flex' }}
                 ref={ref}
               >
+                <Box
+                  sx={{
+                    // display: 'flex',
+                    alignItems: 'center',
+                    // width: WidthRatio[2],
+                    justifyContent: 'center',
+                    flex: `0 0 ${WidthRatio[2]}`,
+                  }}
+                >
+                  {name && (
+                    <ProcessCard
+                      process={{
+                        id,
+                        name,
+                        icons: agentIcons,
+                        agents,
+                        content,
+                        cardRef: getCardRef(`process.${name}`),
+                      }}
+                      handleProcessClick={handleProcessClick}
+                      isFocusing={focusingStepTaskId === id}
+                      isAddActive={id === activeProcessIdAdd}
+                      handleAddActive={handleProcessAdd}
+                      handleEditContent={handleEditContent}
+                    />
+                  )}
+                </Box>
+                <Box sx={{ flex: `0 0 ${WidthRatio[1]}` }} />
                 <Box
                   sx={{
                     display: 'flex',
@@ -209,34 +237,6 @@ export default observer(() => {
                     />
                   )}
                 </Box>
-                <Box sx={{ flex: `0 0 ${WidthRatio[1]}` }} />
-                <Box
-                  sx={{
-                    // display: 'flex',
-                    alignItems: 'center',
-                    // width: WidthRatio[2],
-                    justifyContent: 'center',
-                    flex: `0 0 ${WidthRatio[2]}`,
-                  }}
-                >
-                  {name && (
-                    <ProcessCard
-                      process={{
-                        id,
-                        name,
-                        icons: agentIcons,
-                        agents,
-                        content,
-                        cardRef: getCardRef(`process.${name}`),
-                      }}
-                      handleProcessClick={handleProcessClick}
-                      isFocusing={focusingStepTaskId === id}
-                      isAddActive={id === activeProcessIdAdd}
-                      handleAddActive={handleProcessAdd}
-                      handleEditContent={handleEditContent}
-                    />
-                  )}
-                </Box>
               </Box>
             ),
           )}

frontend/src/components/Outline/index.tsx

@@ -25,7 +25,7 @@ export default observer(({ style = {} }: { style?: SxProps }) => {
         ...style,
       }}
     >
-      <Title title="Plan Outline" />
+      <Title title="任务大纲" />
       <Box
         sx={{
           position: 'relative',