Skip to content

Commit 1de887e

Browse files
phodalphodal
committed
feat(components): add ImplementationGuide component and enhance custom styles for better layout and interaction
1 parent d644edf commit 1de887e

File tree

3 files changed

+174
-0
lines changed

3 files changed

+174
-0
lines changed

‎docs/ai-friendly/index.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ 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 ImplementationGuide from '../../src/components/ImplementationGuide';
1112
import {
1213
Shield,
1314
GitCommit,
@@ -993,6 +994,8 @@ prompts/rules/
993994
</div>
994995
</div>
995996
</div>
997+
998+
<ImplementationGuide />
996999
</div>
9971000
</div>
9981001
);

‎src/components/ImplementationGuide.jsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { useState } from "react"
2+
import { motion } from "framer-motion"
3+
import { CheckCircle2 } from "lucide-react"
4+
5+
const implementationSteps = [
6+
{
7+
title: "建立领域语言",
8+
description: "构建统一的语言，使团队和 AI 都能理解的标准术语",
9+
tasks: [
10+
"识别核心业务概念和术语",
11+
"创建领域特定术语表（domain.csv）",
12+
"建立统一的命名规范和约定",
13+
"在 AutoDev Workspace 中维护术语表"
14+
],
15+
},
16+
{
17+
title: "实施语义化代码",
18+
description: "重构代码以遵循语义化命名和自文档化原则",
19+
tasks: [
20+
"重构现有代码，使用完整的类名和方法名",
21+
"添加清晰的注释说明功能",
22+
"使用语义化的 API 路径",
23+
"实施构造函数注入依赖"
24+
],
25+
},
26+
{
27+
title: "配置 AI 工具链",
28+
description: "设置 AI 驱动的工具用于代码生成、重构和检索",
29+
tasks: [
30+
"配置 AutoDev Planner 进行智能任务规划",
31+
"设置语义化代码检索工具",
32+
"实施自动化代码审查流程",
33+
"配置 Project Rule 控制代码生成"
34+
],
35+
},
36+
{
37+
title: "建立验证体系",
38+
description: "通过自动化工具确保代码质量和系统可靠性",
39+
tasks: [
40+
"配置 Lint 和代码风格检查",
41+
"设置自动化测试流程",
42+
"实施静态和动态分析",
43+
"配置 Observer 模式监控构建和测试"
44+
],
45+
},
46+
{
47+
title: "团队实践与培训",
48+
description: "确保团队理解和遵循 AI 友好架构原则",
49+
tasks: [
50+
"举办语义化编码实践研讨会",
51+
"创建团队编码规范文档",
52+
"建立代码检视标准",
53+
"实施小步迭代开发流程"
54+
],
55+
},
56+
]
57+
58+
export default function ImplementationGuide() {
59+
const [activeStep, setActiveStep] = useState(0)
60+
61+
return (
62+
<section className="py-16 bg-white">
63+
<div className="container mx-auto px-4">
64+
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-center">实施指南</h2>
65+
<p className="text-slate-600 text-center max-w-3xl mx-auto mb-12">在组织中实施 AI 友好型架构的分步骤方法</p>
66+
67+
<div className="grid md:grid-cols-5 gap-4 mb-8">
68+
{implementationSteps.map((step, index) => (
69+
<button
70+
key={index}
71+
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
72+
activeStep === index ? "bg-purple-700 text-white" : "bg-slate-100 text-slate-700 hover:bg-slate-200"
73+
}`}
74+
onClick={() => setActiveStep(index)}
75+
>
76+
步骤 {index + 1}
77+
</button>
78+
))}
79+
</div>
80+
81+
<motion.div
82+
key={activeStep}
83+
initial={{ opacity: 0, y: 20 }}
84+
animate={{ opacity: 1, y: 0 }}
85+
exit={{ opacity: 0, y: -20 }}
86+
transition={{ duration: 0.3 }}
87+
className="bg-white rounded-xl shadow-lg p-8 border border-slate-100"
88+
>
89+
<h3 className="text-2xl font-bold mb-4">{implementationSteps[activeStep].title}</h3>
90+
<p className="text-slate-600 mb-6">{implementationSteps[activeStep].description}</p>
91+
92+
<div className="space-y-4">
93+
{implementationSteps[activeStep].tasks.map((task, index) => (
94+
<div key={index} className="flex items-start">
95+
<CheckCircle2 className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
96+
<p>{task}</p>
97+
</div>
98+
))}
99+
</div>
100+
</motion.div>
101+
102+
<div className="mt-12 text-center">
103+
<button className="bg-purple-700 hover:bg-purple-800 text-white font-medium py-3 px-6 rounded-lg shadow-md transition-colors">
104+
下载完整实施指南
105+
</button>
106+
</div>
107+
</div>
108+
</section>
109+
)
110+
}

‎src/css/custom.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,73 @@ g.cursor-pointer:hover rect {
7171
.md\:grid-cols-3 {
7272
grid-template-columns: repeat(3, minmax(0, 1fr));
7373
}
74+
75+
.md\:grid-cols-5 {
76+
grid-template-columns: repeat(5, minmax(0, 1fr));
77+
}
78+
}
79+
80+
.transition-colors {
81+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
82+
transition-timing-function: cubic-bezier(.4,0,.2,1);
83+
transition-duration: .15s;
7484
}
7585

7686
.flex {
7787
display: flex;
7888
}
7989

90+
.space-y-4 p {
91+
margin: 0;
92+
}
93+
94+
.border {
95+
border-width: 1px;
96+
}
97+
98+
.border-slate-100 {
99+
--tw-border-opacity: 1;
100+
border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
101+
}
102+
103+
.py-3 {
104+
padding-top: .75rem;
105+
padding-bottom: .75rem;
106+
}
107+
.px-6 {
108+
padding-left: 1.5rem;
109+
padding-right: 1.5rem;
110+
}
111+
.hover\:bg-purple-800:hover {
112+
--tw-bg-opacity: 1;
113+
background-color: rgb(107 33 168 / var(--tw-bg-opacity, 1));
114+
}
115+
116+
button {
117+
border: none;
118+
cursor: pointer;
119+
}
120+
121+
.text-green-500 {
122+
--tw-text-opacity: 1;
123+
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
124+
}
125+
126+
.py-2 {
127+
padding-top: .5rem;
128+
padding-bottom: .5rem;
129+
}
130+
131+
.px-4 {
132+
padding-left: 1rem;
133+
padding-right: 1rem;
134+
}
135+
136+
137+
.gap-4 {
138+
gap: 1rem;
139+
}
140+
80141
.gap-6 {
81142
gap: 1.5rem;
82143
}

0 commit comments

Comments
 (0)