Skip to content

Commit d644edf

Browse files
phodalphodal
committed
feat(architecture): enhance flow paths and markers for improved visual clarity in ArchitectureFlow component
1 parent 6c740bc commit d644edf

File tree

1 file changed

+152
-24
lines changed

1 file changed

+152
-24
lines changed

‎src/components/ArchitectureFlow.jsx‎

Lines changed: 152 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -226,80 +226,208 @@ export const ArchitectureFlow = ({ onClickSection }) => {
226226
{/* 顶部行连接 */}
227227
<g className="arrows">
228228
{/* 统一领域语言 到 需求精炼 */}
229-
<path d="M680 112 L680 172" stroke="black" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)" />
229+
<path
230+
d="M686 112 C686 140 686 150 686 172"
231+
stroke="black"
232+
strokeWidth="2"
233+
fill="none"
234+
markerEnd="url(#arrowhead-black)"
235+
className="flow-path"
236+
/>
230237

231238
{/* 统一领域语言 到 智能任务规划 */}
232-
<path d="M786 77 L1066 172" stroke="black" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)" />
239+
<path
240+
d="M786 77 C900 100 1000 150 1066 172"
241+
stroke="black"
242+
strokeWidth="2"
243+
fill="none"
244+
markerEnd="url(#arrowhead-black)"
245+
className="flow-path"
246+
/>
233247

234248
{/* 问题/任务 到 需求精炼 */}
235-
<path d="M247 202 L590 202" stroke="black" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)" />
249+
<path
250+
d="M247 202 C400 202 500 202 590 202"
251+
stroke="black"
252+
strokeWidth="2"
253+
fill="none"
254+
markerEnd="url(#arrowhead-black)"
255+
className="flow-path"
256+
/>
236257

237258
{/* 需求精炼 到 智能任务规划 */}
238-
<path d="M770 202 L1066 202" stroke="black" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)" />
259+
<path
260+
d="M770 202 C850 202 950 202 1066 202"
261+
stroke="black"
262+
strokeWidth="2"
263+
fill="none"
264+
markerEnd="url(#arrowhead-black)"
265+
className="flow-path"
266+
/>
239267

240268
{/* 智能任务规划 到 Action */}
241-
<path d="M1246 202 L1340 202" stroke="green" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)" />
269+
<path
270+
d="M1246 202 C1280 202 1310 202 1340 202"
271+
stroke="green"
272+
strokeWidth="2"
273+
fill="none"
274+
markerEnd="url(#arrowhead-green)"
275+
className="flow-path"
276+
/>
242277

243278
{/* Action 到 AI 代码自校验 */}
244-
<path d="M1430 232 L1430 415" stroke="green" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)" />
279+
<path
280+
d="M1430 232 C1430 300 1430 350 1430 415"
281+
stroke="green"
282+
strokeWidth="2"
283+
fill="none"
284+
markerEnd="url(#arrowhead-green)"
285+
className="flow-path"
286+
/>
245287

246288
{/* 代码补全 到 团队编码规范 */}
247-
<path d="M247 445 L330 445" stroke="black" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)" />
289+
<path
290+
d="M247 445 C280 445 310 445 330 445"
291+
stroke="black"
292+
strokeWidth="2"
293+
fill="none"
294+
markerEnd="url(#arrowhead-black)"
295+
className="flow-path"
296+
/>
248297

249298
{/* 团队编码规范 到 自文档化代码 */}
250-
<path d="M510 445 L590 445" stroke="black" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)" />
299+
<path
300+
d="M510 445 C540 445 570 445 590 445"
301+
stroke="black"
302+
strokeWidth="2"
303+
fill="none"
304+
markerEnd="url(#arrowhead-black)"
305+
className="flow-path"
306+
/>
251307

252308
{/* 智能任务规划 到 面向生成的重构 */}
253309
<path
254310
d="M1156 232 C1156 300 1000 350 940 415"
255311
stroke="green"
256-
strokeWidth="1.5"
312+
strokeWidth="2"
257313
fill="none"
258-
markerEnd="url(#arrowhead)"
314+
markerEnd="url(#arrowhead-green)"
315+
className="flow-path"
259316
/>
260317

261318
{/* 智能任务规划 到 语义化代码检索 */}
262319
<path
263320
d="M1156 232 C1156 300 1200 350 1200 415"
264321
stroke="red"
265-
strokeWidth="1.5"
322+
strokeWidth="2"
266323
fill="none"
267-
markerEnd="url(#arrowhead)"
324+
markerEnd="url(#arrowhead-red)"
325+
className="flow-path"
268326
/>
269327

270328
{/* 面向生成的重构 到 自文档化代码 */}
271-
<path d="M850 445 L770 445" stroke="green" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)" />
329+
<path
330+
d="M850 445 C820 445 790 445 770 445"
331+
stroke="green"
332+
strokeWidth="2"
333+
fill="none"
334+
markerEnd="url(#arrowhead-green)"
335+
className="flow-path"
336+
/>
272337

273338
{/* 语义化代码检索 到 代码库 */}
274339
<path
275340
d="M1200 475 C1200 520 1000 550 940 570"
276341
stroke="red"
277-
strokeWidth="1.5"
342+
strokeWidth="2"
278343
fill="none"
279-
markerEnd="url(#arrowhead)"
344+
markerEnd="url(#arrowhead-red)"
345+
className="flow-path"
280346
/>
281347

282348
<defs>
283-
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
284-
<polygon points="0 0, 10 3.5, 0 7" fill="currentColor" />
349+
{/* Black arrow */}
350+
<marker
351+
id="arrowhead-black"
352+
markerWidth="12"
353+
markerHeight="8"
354+
refX="10"
355+
refY="4"
356+
orient="auto"
357+
>
358+
<path
359+
d="M0,0 L10,4 L0,8 L2,4 Z"
360+
fill="black"
361+
className="arrow-head"
362+
/>
363+
</marker>
364+
{/* Green arrow */}
365+
<marker
366+
id="arrowhead-green"
367+
markerWidth="12"
368+
markerHeight="8"
369+
refX="10"
370+
refY="4"
371+
orient="auto"
372+
>
373+
<path
374+
d="M0,0 L10,4 L0,8 L2,4 Z"
375+
fill="#16a34a"
376+
className="arrow-head"
377+
/>
285378
</marker>
286-
<marker id="arrowhead-start" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
287-
<polygon points="10 0, 0 3.5, 10 7" fill="currentColor" />
379+
{/* Red arrow */}
380+
<marker
381+
id="arrowhead-red"
382+
markerWidth="12"
383+
markerHeight="8"
384+
refX="10"
385+
refY="4"
386+
orient="auto"
387+
>
388+
<path
389+
d="M0,0 L10,4 L0,8 L2,4 Z"
390+
fill="#ec4899"
391+
className="arrow-head"
392+
/>
393+
</marker>
394+
{/* Start markers for bidirectional paths */}
395+
<marker
396+
id="arrowhead-start-black"
397+
markerWidth="12"
398+
markerHeight="8"
399+
refX="2"
400+
refY="4"
401+
orient="auto"
402+
>
403+
<path
404+
d="M10,0 L0,4 L10,8 L8,4 Z"
405+
fill="black"
406+
className="arrow-head"
407+
/>
288408
</marker>
289409
</defs>
290410

291411
{/* 自文档化代码 与 代码库 的双向关系 */}
292412
<path
293-
d="M680 475 C680 520 800 550 850 570"
413+
d="M680 475 C680 520 800 550 940 570"
294414
stroke="black"
295-
strokeWidth="1.5"
415+
strokeWidth="2"
296416
fill="none"
297-
markerEnd="url(#arrowhead)"
298-
markerStart="url(#arrowhead-start)"
417+
markerEnd="url(#arrowhead-black)"
418+
markerStart="url(#arrowhead-start-black)"
419+
className="flow-path"
299420
/>
300421

301422
{/* 需求精炼 到 自文档化代码 */}
302-
<path d="M680 232 L680 415" stroke="black" strokeWidth="1.5" fill="none" markerEnd="url(#arrowhead)" />
423+
<path
424+
d="M680 232 C680 300 680 350 680 415"
425+
stroke="black"
426+
strokeWidth="2"
427+
fill="none"
428+
markerEnd="url(#arrowhead-black)"
429+
className="flow-path"
430+
/>
303431
</g>
304432

305433
{/* 图例 */}

0 commit comments

Comments
 (0)