Skip to content

Commit 6c740bc

Browse files
phodalphodal
committed
feat(components): update icons in ArchitectureFlow and add margin utility class
1 parent 3bd479f commit 6c740bc

File tree

2 files changed

+41
-149
lines changed

2 files changed

+41
-149
lines changed

‎docs/ai-friendly/index.mdx‎

Lines changed: 37 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,24 @@ import { useState, useRef } from 'react';
88
import BrowserOnly from '@docusaurus/BrowserOnly';
99
import ArchitectureFlow from '../../src/components/ArchitectureFlow';
1010
import CodeBlock from '@theme/CodeBlock';
11-
import { Shield, GitCommit, RefreshCw, CheckCircle, AlertTriangle } from "lucide-react"
11+
import {
12+
Shield,
13+
GitCommit,
14+
RefreshCw,
15+
CheckCircle,
16+
AlertTriangle,
17+
FileText,
18+
MessageSquare,
19+
BrainCircuit,
20+
ArrowLeftRight,
21+
Search,
22+
Database,
23+
HelpCircle,
24+
PanelsLeftBottom,
25+
Check,
26+
GitBranch,
27+
RotateCcw
28+
} from "lucide-react"
1229

1330
export const AIFriendlyArchitecture = () => {
1431
const [activeSection, setActiveSection] = useState(null);
@@ -66,14 +83,7 @@ export const AIFriendlyArchitecture = () => {
6683
<div className="grid-2">
6784
<div className="card">
6885
<div className="icon-circle bg-purple-700">
69-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
70-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
71-
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
72-
<polyline points="14 2 14 8 20 8"></polyline>
73-
<line x1="16" y1="13" x2="8" y2="13"></line>
74-
<line x1="16" y1="17" x2="8" y2="17"></line>
75-
<polyline points="10 9 9 9 8 9"></polyline>
76-
</svg>
86+
<FileText className="h-6 w-6" />
7787
</div>
7888
<h3 className="text-xl font-semibold mb-2">代码命名规范的产生</h3>
7989
<p className="text-slate-600 mb-4">构建统一的语言，确保团队成员和 AI 都能理解代码含义</p>
@@ -104,10 +114,7 @@ export const AIFriendlyArchitecture = () => {
104114

105115
<div className="card">
106116
<div className="icon-circle bg-purple-700">
107-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
108-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
109-
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
110-
</svg>
117+
<MessageSquare className="h-6 w-6" />
111118
</div>
112119
<h3 className="text-xl font-semibold mb-2">领域特定语言</h3>
113120
<p className="text-slate-600 mb-4">围绕业务领域概念构建代码，创建开发人员和利益相关者之间的共享语言
@@ -172,17 +179,10 @@ export const AIFriendlyArchitecture = () => {
172179
</div>
173180

174181
<div className="card">
175-
<h3 className="text-2xl font-bold mb-6 text-center">Planning 工作原理</h3>
176-
177182
<div className="grid-2">
178183
<div>
179184
<div className="icon-circle bg-orange-500">
180-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
181-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
182-
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
183-
<line x1="3" y1="9" x2="21" y2="9"></line>
184-
<line x1="9" y1="21" x2="9" y2="9"></line>
185-
</svg>
185+
<BrainCircuit className="h-6 w-6" />
186186
</div>
187187
<h3 className="text-xl font-semibold mb-2">任务分解</h3>
188188
<p className="text-slate-600 mb-4">将复杂需求分解为可管理的子任务，创建清晰的执行路径</p>
@@ -216,23 +216,7 @@ export const AIFriendlyArchitecture = () => {
216216

217217
<div>
218218
<div className="icon-circle bg-orange-500">
219-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
220-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
221-
className="lucide lucide-brain-circuit h-6 w-6">
222-
<path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path>
223-
<path d="M9 13a4.5 4.5 0 0 0 3-4"></path>
224-
<path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path>
225-
<path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path>
226-
<path d="M6 18a4 4 0 0 1-1.967-.516"></path>
227-
<path d="M12 13h4"></path>
228-
<path d="M12 18h6a2 2 0 0 1 2 2v1"></path>
229-
<path d="M12 8h8"></path>
230-
<path d="M16 8V5a2 2 0 0 1 2-2"></path>
231-
<circle cx="16" cy="13" r=".5"></circle>
232-
<circle cx="18" cy="3" r=".5"></circle>
233-
<circle cx="20" cy="21" r=".5"></circle>
234-
<circle cx="20" cy="8" r=".5"></circle>
235-
</svg>
219+
<BrainCircuit className="h-6 w-6" />
236220
</div>
237221
<h3 className="text-xl font-semibold mb-2">智能决策</h3>
238222
<p className="text-slate-600 mb-4">规划器基于领域知识和代码库上下文，为每个任务选择最佳实现策略</p>
@@ -462,12 +446,7 @@ public void deleteBlog(@PathVariable Long id) {
462446
<div className="grid-2">
463447
<div>
464448
<div className="icon-circle bg-green-600">
465-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
466-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
467-
<path d="M23 4v6h-6"></path>
468-
<path d="M1 20v-6h6"></path>
469-
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
470-
</svg>
449+
<ArrowLeftRight className="h-6 w-6" />
471450
</div>
472451
<h3 className="text-xl font-semibold mb-2">代码优化</h3>
473452
<p className="text-slate-600 mb-4">重构工具能够识别并改进代码中的问题，使其更加清晰、简洁和高效</p>
@@ -497,11 +476,7 @@ public void deleteBlog(@PathVariable Long id) {
497476

498477
<div>
499478
<div className="icon-circle bg-green-600">
500-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
501-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
502-
<polyline points="16 18 22 12 16 6"></polyline>
503-
<polyline points="8 6 2 12 8 18"></polyline>
504-
</svg>
479+
<ArrowLeftRight className="h-6 w-6" />
505480
</div>
506481
<h3 className="text-xl font-semibold mb-2">AI 友好转换</h3>
507482
<p className="text-slate-600 mb-4">将现有代码转换为更适合 AI 理解和生成的形式，提高 AI 辅助编程的效率</p>
@@ -598,16 +573,10 @@ private void markItemAsNotSelected(Item item) {
598573
</div>
599574

600575
<div className="card">
601-
<h3 className="text-2xl font-bold mb-6 text-center">检索工具的功能</h3>
602-
603576
<div className="grid-2">
604577
<div>
605578
<div className="icon-circle bg-pink-500">
606-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
607-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
608-
<circle cx="11" cy="11" r="8"></circle>
609-
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
610-
</svg>
579+
<Search className="h-6 w-6" />
611580
</div>
612581
<h3 className="text-xl font-semibold mb-2">语义化搜索</h3>
613582
<p className="text-slate-600 mb-4">基于意图和语义理解进行代码搜索，而不仅仅是关键字匹配</p>
@@ -637,12 +606,7 @@ private void markItemAsNotSelected(Item item) {
637606

638607
<div>
639608
<div className="icon-circle bg-pink-500">
640-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
641-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
642-
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
643-
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
644-
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
645-
</svg>
609+
<Database className="h-6 w-6" />
646610
</div>
647611
<h3 className="text-xl font-semibold mb-2">代码知识库</h3>
648612
<p className="text-slate-600 mb-4">构建和维护代码库的知识图谱，支持智能推荐和上下文理解</p>
@@ -708,17 +672,10 @@ private void markItemAsNotSelected(Item item) {
708672
</div>
709673

710674
<div className="card">
711-
<h3 className="text-2xl font-bold mb-6 text-center">问题精炼/定义意图的重要性</h3>
712-
713675
<div className="grid-2">
714676
<div>
715677
<div className="icon-circle bg-slate-700">
716-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
717-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
718-
<circle cx="12" cy="12" r="10"></circle>
719-
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
720-
<line x1="12" y1="17" x2="12.01" y2="17"></line>
721-
</svg>
678+
<PanelsLeftBottom className="h-6 w-6" />
722679
</div>
723680
<h3 className="text-xl font-semibold mb-2">问题表达的挑战</h3>
724681
<p className="text-slate-600 mb-4">模糊的需求描述和简单的指令往往导致 AI 生成不符合预期的代码</p>
@@ -748,10 +705,7 @@ private void markItemAsNotSelected(Item item) {
748705

749706
<div>
750707
<div className="icon-circle bg-slate-700">
751-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
752-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
753-
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
754-
</svg>
708+
<HelpCircle className="h-6 w-6" />
755709
</div>
756710
<h3 className="text-xl font-semibold mb-2">问题精炼技巧</h3>
757711
<p className="text-slate-600 mb-4">通过结构化和丰富上下文，将模糊需求转化为明确的问题</p>
@@ -811,16 +765,10 @@ private void markItemAsNotSelected(Item item) {
811765
</div>
812766

813767
<div className="card">
814-
<h3 className="text-2xl font-bold mb-6 text-center">团队规范的建立</h3>
815-
816768
<div className="grid-2">
817769
<div>
818770
<div className="icon-circle bg-purple-700">
819-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
820-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
821-
<path d="M9 11l3 3L22 4"></path>
822-
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
823-
</svg>
771+
<Check className="h-6 w-6" />
824772
</div>
825773
<h3 className="text-xl font-semibold mb-2">代码检视实践</h3>
826774
<p className="text-slate-600 mb-4">通过代码检视维护团队最佳实践，确保代码质量和一致性</p>
@@ -850,13 +798,7 @@ private void markItemAsNotSelected(Item item) {
850798

851799
<div>
852800
<div className="icon-circle bg-purple-700">
853-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
854-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
855-
<line x1="6" y1="3" x2="6" y2="15"></line>
856-
<circle cx="18" cy="6" r="3"></circle>
857-
<circle cx="6" cy="18" r="3"></circle>
858-
<path d="M18 9a9 9 0 0 1-9 9"></path>
859-
</svg>
801+
<GitBranch className="h-6 w-6" />
860802
</div>
861803
<h3 className="text-xl font-semibold mb-2">架构分层与内聚</h3>
862804
<p className="text-slate-600 mb-4">遏制面条式代码，通过分层和内聚构建清晰的系统结构</p>
@@ -925,17 +867,12 @@ prompts/rules/
925867
<div ref={validationRef} className="mt-12">
926868
<div className="section-header">
927869
<h2 className="section-title bg-green-600">AI 代码自校验</h2>
928-
<p className="text-slate-600">通过自动化工具确保代码质量和系统可靠性</p>
870+
<p className="text-slate-600">通过自动化工具确保代码质量和系统可靠性。
871+
在 AutoDev Composer 中，我们通过 Lint、测试运行等方式来检查代码质量。同时通过 &nbsp;
872+
<a href="/composer/observer" target={"_blank"}>Observer</a> 模式来监控和分析过程中的问题，诸如构建失败和测试失败。
873+
</p>
929874
</div>
930875
<div className="container mx-auto px-4">
931-
<div className="text-center mb-12">
932-
<h2 className="text-3xl md:text-4xl font-bold mb-4">AI 代码自校验</h2>
933-
<div className="w-24 h-1 bg-blue-600 mx-auto mb-6"></div>
934-
<p className="text-slate-600 max-w-3xl mx-auto">
935-
通过自动化工具确保 AI 生成代码的质量和系统可靠性，实现快速小步迭代
936-
</p>
937-
</div>
938-
939876
<div className="grid md:grid-cols-2 gap-8">
940877
<div className="bg-white rounded-xl shadow-lg p-6 border border-slate-100">
941878
<div className="bg-blue-600 icon-circle text-white">
@@ -968,7 +905,7 @@ prompts/rules/
968905

969906
<div className="bg-white rounded-xl shadow-lg p-6 border border-slate-100">
970907
<div className="bg-blue-600 icon-circle text-white">
971-
<GitCommit className="h-6 w-6" />
908+
<RotateCcw className="h-6 w-6" />
972909
</div>
973910
<h3 className="text-xl font-semibold mb-4">快速小步迭代</h3>
974911

@@ -1015,7 +952,7 @@ prompts/rules/
1015952
<div className="mt-12 bg-white rounded-xl shadow-lg p-6">
1016953
<div className="flex items-center mb-6">
1017954
<div className="bg-blue-600 icon-circle text-white">
1018-
<RefreshCw className="h-6 w-6" />
955+
<RotateCcw className="h-6 w-6" />
1019956
</div>
1020957
<h3 className="text-xl font-semibold">自校验流程</h3>
1021958
</div>
@@ -1050,60 +987,11 @@ prompts/rules/
1050987
</div>
1051988

1052989
<div className="mt-8 p-4 bg-blue-50 rounded-lg text-center">
1053-
<p className="text-blue-700 font-medium">
990+
<p className="text-blue-700 font-medium mb-0">
1054991
AI 代码自校验不仅是一种技术，更是一种开发理念，强调通过自动化验证和小步迭代来确保 AI 生成代码的质量和可靠性
1055992
</p>
1056993
</div>
1057994
</div>
1058-
1059-
<div className="mt-8 bg-white rounded-xl shadow-lg p-6">
1060-
<h3 className="text-xl font-semibold mb-6 text-center">小步迭代的优势</h3>
1061-
<div className="grid md:grid-cols-2 gap-6">
1062-
<div className="flex items-start">
1063-
<div className="bg-green-100 icon-circle text-white">
1064-
<CheckCircle className="h-5 w-5" />
1065-
</div>
1066-
<div>
1067-
<h4 className="font-medium mb-1">降低风险</h4>
1068-
<p className="text-slate-600 text-sm">
1069-
小步骤意味着每次变更的风险范围有限，即使出现问题，影响也被控制在最小范围内
1070-
</p>
1071-
</div>
1072-
</div>
1073-
1074-
<div className="flex items-start">
1075-
<div className="bg-green-100 text-green-600 p-2 rounded-full mr-3 flex-shrink-0">
1076-
<CheckCircle className="h-5 w-5" />
1077-
</div>
1078-
<div>
1079-
<h4 className="font-medium mb-1">提高可追溯性</h4>
1080-
<p className="text-slate-600 text-sm">清晰记录每个小步骤的目的和变更，便于理解代码演化历史和决策原因</p>
1081-
</div>
1082-
</div>
1083-
1084-
<div className="flex items-start">
1085-
<div className="bg-green-100 text-green-600 p-2 rounded-full mr-3 flex-shrink-0">
1086-
<CheckCircle className="h-5 w-5" />
1087-
</div>
1088-
<div>
1089-
<h4 className="font-medium mb-1">加速反馈</h4>
1090-
<p className="text-slate-600 text-sm">快速获得验证结果，及早发现并解决问题，避免问题累积和复合</p>
1091-
</div>
1092-
</div>
1093-
1094-
<div className="flex items-start">
1095-
<div className="bg-green-100 text-green-600 p-2 rounded-full mr-3 flex-shrink-0">
1096-
<CheckCircle className="h-5 w-5" />
1097-
</div>
1098-
<div>
1099-
<h4 className="font-medium mb-1">简化调试</h4>
1100-
<p className="text-slate-600 text-sm">
1101-
当问题出现时，更容易定位到具体的小步骤，缩小排查范围，加速问题解决
1102-
</p>
1103-
</div>
1104-
</div>
1105-
</div>
1106-
</div>
1107995
</div>
1108996
</div>
1109997
</div>

‎src/css/custom.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ g.cursor-pointer {
4646
cursor: pointer;
4747
}
4848

49+
p.mb-0 {
50+
margin-bottom: 0;
51+
}
52+
4953
g.cursor-pointer:hover rect {
5054
/* change background */
5155
fill: var(--ifm-color-primary);

0 commit comments

Comments
 (0)