abc/analysis_claude_code
1
0
Fork 0
mirror of https://github.com/shareAI-lab/analysis_claude_code.git synced 2026-05-06 16:26:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): remove duplicate "Execution Flow" heading in Deep Dive (#151)

Browse Source
This commit is contained in:
chenyizhongx
2026-04-01 21:00:52 +08:00
committed by GitHub
parent 6511c98631
commit d882d01e07
1 changed files with 36 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
web/src/components/architecture/execution-flow.tsx
View File

@@ -2,7 +2,6 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useTranslations } from "@/lib/i18n";
import { getFlowForVersion } from "@/data/execution-flows"; import { getFlowForVersion } from "@/data/execution-flows";
import type { FlowNode, FlowEdge } from "@/types/agent-data"; import type { FlowNode, FlowEdge } from "@/types/agent-data";
@@ -186,7 +185,6 @@ interface ExecutionFlowProps {
} }
export function ExecutionFlow({ version }: ExecutionFlowProps) { export function ExecutionFlow({ version }: ExecutionFlowProps) {
const t = useTranslations("version");
const [flow, setFlow] = useState<ReturnType<typeof getFlowForVersion>>(null); const [flow, setFlow] = useState<ReturnType<typeof getFlowForVersion>>(null);
useEffect(() => { useEffect(() => {
@@ -198,46 +196,43 @@ export function ExecutionFlow({ version }: ExecutionFlowProps) {
const maxY = Math.max(...flow.nodes.map((n) => n.y)) + 50; const maxY = Math.max(...flow.nodes.map((n) => n.y)) + 50;
return ( return (
<section> <div className="overflow-x-auto rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] p-4">
<h2 className="mb-4 text-xl font-semibold">{t("execution_flow")}</h2> <svg
<div className="overflow-x-auto rounded-xl border border-[var(--color-border)] bg-[var(--color-bg)] p-4"> viewBox={`0 0 600 ${maxY}`}
<svg className="mx-auto w-full max-w-[600px]"
viewBox={`0 0 600 ${maxY}`} style={{ minHeight: 300 }}
className="mx-auto w-full max-w-[600px]" >
style={{ minHeight: 300 }} <defs>
> <marker
<defs> id="arrowhead"
<marker markerWidth={8}
id="arrowhead" markerHeight={6}
markerWidth={8} refX={8}
markerHeight={6} refY={3}
refX={8} orient="auto"
refY={3} >
orient="auto" <polygon
> points="0 0, 8 3, 0 6"
<polygon fill="var(--color-text-secondary)"
points="0 0, 8 3, 0 6" />
fill="var(--color-text-secondary)" </marker>
/> </defs>
</marker>
</defs>
{flow.edges.map((edge, i) => ( {flow.edges.map((edge, i) => (
<EdgePath key={`${edge.from}-${edge.to}`} edge={edge} nodes={flow.nodes} index={i} /> <EdgePath key={`${edge.from}-${edge.to}`} edge={edge} nodes={flow.nodes} index={i} />
))} ))}
{flow.nodes.map((node, i) => ( {flow.nodes.map((node, i) => (
<motion.g <motion.g
key={node.id} key={node.id}
initial={{ opacity: 0, y: -10 }} initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.06, duration: 0.3 }} transition={{ delay: i * 0.06, duration: 0.3 }}
> >
<NodeShape node={node} /> <NodeShape node={node} />
</motion.g> </motion.g>
))} ))}
</svg> </svg>
</div> </div>
</section>
); );
} }