Skip to content

Commit 3bd479f

Browse files
phodalphodal
committed
feat(styles): integrate Tailwind CSS and enhance layout for AI 代码自校验 section
1 parent c88eda0 commit 3bd479f

File tree

2 files changed

+264
-59
lines changed

2 files changed

+264
-59
lines changed

‎docs/ai-friendly/index.mdx‎

Lines changed: 169 additions & 59 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 { Shield, GitCommit, RefreshCw, CheckCircle, AlertTriangle } from "lucide-react"
1112

1213
export const AIFriendlyArchitecture = () => {
1314
const [activeSection, setActiveSection] = useState(null);
@@ -926,72 +927,181 @@ prompts/rules/
926927
<h2 className="section-title bg-green-600">AI 代码自校验</h2>
927928
<p className="text-slate-600">通过自动化工具确保代码质量和系统可靠性</p>
928929
</div>
929-
<div className="grid-2">
930-
<div className="card">
931-
<div className="icon-circle bg-green-600">
932-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
933-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
934-
<path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6"></path>
935-
<path d="M4 8V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2"></path>
936-
<path d="M12 2v20"></path>
937-
</svg>
930+
<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+
939+
<div className="grid md:grid-cols-2 gap-8">
940+
<div className="bg-white rounded-xl shadow-lg p-6 border border-slate-100">
941+
<div className="bg-blue-600 icon-circle text-white">
942+
<Shield className="h-6 w-6" />
943+
</div>
944+
<h3 className="text-xl font-semibold mb-4">验证技术</h3>
945+
946+
<div className="space-y-4">
947+
<div className="bg-slate-50 p-4 rounded-lg">
948+
<h4 className="font-medium text-blue-700 mb-2">形式化验证</h4>
949+
<p className="text-slate-600 text-sm">使用数学证明验证代码是否符合形式规约，特别适用于安全关键系统</p>
950+
</div>
951+
952+
<div className="bg-slate-50 p-4 rounded-lg">
953+
<h4 className="font-medium text-blue-700 mb-2">自动化测试</h4>
954+
<p className="text-slate-600 text-sm">单元测试、属性测试、变异测试、模糊测试等，验证功能正确性和鲁棒性</p>
955+
</div>
956+
957+
<div className="bg-slate-50 p-4 rounded-lg">
958+
<h4 className="font-medium text-blue-700 mb-2">静态分析</h4>
959+
<p className="text-slate-600 text-sm">在不执行代码的情况下分析源代码，查找缺陷、漏洞和风格问题</p>
960+
</div>
961+
962+
<div className="bg-slate-50 p-4 rounded-lg">
963+
<h4 className="font-medium text-blue-700 mb-2">动态分析</h4>
964+
<p className="text-slate-600 text-sm">在代码执行期间测试其行为，包括性能和运行时错误检测</p>
965+
</div>
966+
</div>
938967
</div>
939-
<h3 className="text-xl font-semibold mb-2">自动化验证</h3>
940-
<p className="text-slate-600 mb-4">通过自动化手段确认代码或系统是否满足预定标准、规范或要求</p>
941968

942-
<div className="bg-slate-100 p-4 rounded-lg">
943-
<h4 className="font-medium mb-2">验证类型</h4>
944-
<ul className="space-y-2">
945-
<li className="flex items-start">
946-
<span className="text-green-600 mr-2">•</span>
947-
<span>自动化测试：单元测试、集成测试、端到端测试</span>
948-
</li>
949-
<li className="flex items-start">
950-
<span className="text-green-600 mr-2">•</span>
951-
<span>代码质量检查：风格检查、复杂度分析、安全扫描</span>
952-
</li>
953-
<li className="flex items-start">
954-
<span className="text-green-600 mr-2">•</span>
955-
<span>规则检查：业务规则验证、架构约束检查</span>
956-
</li>
957-
<li className="flex items-start">
958-
<span className="text-green-600 mr-2">•</span>
959-
<span>幻觉检测：AI 生成内容的准确性和合理性验证</span>
960-
</li>
961-
</ul>
969+
<div className="bg-white rounded-xl shadow-lg p-6 border border-slate-100">
970+
<div className="bg-blue-600 icon-circle text-white">
971+
<GitCommit className="h-6 w-6" />
972+
</div>
973+
<h3 className="text-xl font-semibold mb-4">快速小步迭代</h3>
974+
975+
<div className="space-y-4">
976+
<div className="bg-slate-50 p-4 rounded-lg">
977+
<h4 className="font-medium text-blue-700 mb-2">小步提交</h4>
978+
<p className="text-slate-600 text-sm">将大型任务拆分为小的、可独立验证的改动，频繁提交，便于追踪和回滚</p>
979+
<div className="mt-2 flex items-center text-sm text-green-600">
980+
<CheckCircle className="h-4 w-4 mr-1" />
981+
<span>每次提交专注于单一功能或修复</span>
982+
</div>
983+
</div>
984+
985+
<div className="bg-slate-50 p-4 rounded-lg">
986+
<h4 className="font-medium text-blue-700 mb-2">小步校验</h4>
987+
<p className="text-slate-600 text-sm">每个小步骤后立即进行自动化验证，及早发现并修复问题</p>
988+
<div className="mt-2 flex items-center text-sm text-green-600">
989+
<CheckCircle className="h-4 w-4 mr-1" />
990+
<span>IDE 实时检查 + CI/CD 流水线自动验证</span>
991+
</div>
992+
</div>
993+
994+
<div className="bg-slate-50 p-4 rounded-lg">
995+
<h4 className="font-medium text-blue-700 mb-2">快速反馈</h4>
996+
<p className="text-slate-600 text-sm">构建快速反馈循环，验证结果立即可见，指导下一步开发</p>
997+
<div className="mt-2 flex items-center text-sm text-green-600">
998+
<CheckCircle className="h-4 w-4 mr-1" />
999+
<span>缩短从编码到验证的时间间隔</span>
1000+
</div>
1001+
</div>
1002+
1003+
<div className="bg-slate-50 p-4 rounded-lg">
1004+
<h4 className="font-medium text-blue-700 mb-2">便捷回滚</h4>
1005+
<p className="text-slate-600 text-sm">小步迭代使回滚更加精确和简单，降低修复成本</p>
1006+
<div className="mt-2 flex items-center text-sm text-green-600">
1007+
<CheckCircle className="h-4 w-4 mr-1" />
1008+
<span>问题隔离在小范围内，易于定位和修复</span>
1009+
</div>
1010+
</div>
1011+
</div>
9621012
</div>
9631013
</div>
9641014

965-
<div className="card">
966-
<div className="icon-circle bg-green-600">
967-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
968-
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
969-
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
970-
</svg>
1015+
<div className="mt-12 bg-white rounded-xl shadow-lg p-6">
1016+
<div className="flex items-center mb-6">
1017+
<div className="bg-blue-600 icon-circle text-white">
1018+
<RefreshCw className="h-6 w-6" />
1019+
</div>
1020+
<h3 className="text-xl font-semibold">自校验流程</h3>
9711021
</div>
972-
<h3 className="text-xl font-semibold mb-2">持续集成与交付</h3>
973-
<p className="text-slate-600 mb-4">在 CI/CD 流水线中集成自动化验证，确保代码质量和系统可靠性</p>
9741022

975-
<div className="bg-slate-100 p-4 rounded-lg">
976-
<h4 className="font-medium mb-2">验证流程</h4>
977-
<ul className="space-y-2">
978-
<li className="flex items-start">
979-
<span className="text-green-600 mr-2">•</span>
980-
<span>代码提交前：本地预提交检查</span>
981-
</li>
982-
<li className="flex items-start">
983-
<span className="text-green-600 mr-2">•</span>
984-
<span>构建阶段：编译检查和依赖验证</span>
985-
</li>
986-
<li className="flex items-start">
987-
<span className="text-green-600 mr-2">•</span>
988-
<span>测试阶段：自动化测试套件执行</span>
989-
</li>
990-
<li className="flex items-start">
991-
<span className="text-green-600 mr-2">•</span>
992-
<span>部署前：环境配置和兼容性检查</span>
993-
</li>
994-
</ul>
1023+
<div className="grid md:grid-cols-3 gap-6">
1024+
<div className="bg-slate-50 p-4 rounded-lg">
1025+
<h4 className="font-medium mb-2 text-blue-700">1. 代码生成</h4>
1026+
<p className="text-slate-600 text-sm mb-3">AI 根据提示生成初始代码，可能包含潜在问题</p>
1027+
<div className="flex items-center text-amber-600 text-sm">
1028+
<AlertTriangle className="h-4 w-4 mr-1" />
1029+
<span>AI 生成代码可能存在质量和安全隐患</span>
1030+
</div>
1031+
</div>
1032+
1033+
<div className="bg-slate-50 p-4 rounded-lg">
1034+
<h4 className="font-medium mb-2 text-blue-700">2. 自动验证</h4>
1035+
<p className="text-slate-600 text-sm mb-3">应用多层次验证技术，检查功能正确性、安全性、代码风格等</p>
1036+
<div className="flex items-center text-blue-600 text-sm">
1037+
<Shield className="h-4 w-4 mr-1" />
1038+
<span>多种验证工具协同工作，形成纵深防御</span>
1039+
</div>
1040+
</div>
1041+
1042+
<div className="bg-slate-50 p-4 rounded-lg">
1043+
<h4 className="font-medium mb-2 text-blue-700">3. 修复与优化</h4>
1044+
<p className="text-slate-600 text-sm mb-3">基于验证结果，修复问题并优化代码，可能利用 AI 辅助修复</p>
1045+
<div className="flex items-center text-green-600 text-sm">
1046+
<CheckCircle className="h-4 w-4 mr-1" />
1047+
<span>小步修复，每次聚焦单一问题</span>
1048+
</div>
1049+
</div>
1050+
</div>
1051+
1052+
<div className="mt-8 p-4 bg-blue-50 rounded-lg text-center">
1053+
<p className="text-blue-700 font-medium">
1054+
AI 代码自校验不仅是一种技术，更是一种开发理念，强调通过自动化验证和小步迭代来确保 AI 生成代码的质量和可靠性
1055+
</p>
1056+
</div>
1057+
</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>
9951105
</div>
9961106
</div>
9971107
</div>

‎src/css/custom.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
15
/**
26
* Any CSS included here will be global. The classic template
37
* bundles Infima by default. Infima is a CSS framework designed to
@@ -56,6 +60,97 @@ g.cursor-pointer:hover rect {
5660
overflow: hidden;
5761
}
5862

63+
@media (min-width: 768px) {
64+
.md\:grid-cols-2 {
65+
grid-template-columns: repeat(2, minmax(0, 1fr));
66+
}
67+
.md\:grid-cols-3 {
68+
grid-template-columns: repeat(3, minmax(0, 1fr));
69+
}
70+
}
71+
72+
.flex {
73+
display: flex;
74+
}
75+
76+
.gap-6 {
77+
gap: 1.5rem;
78+
}
79+
80+
.gap-8 {
81+
gap: 2rem;
82+
}
83+
84+
.grid {
85+
display: grid;
86+
}
87+
88+
.shadow-lg, .shadow-md {
89+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
90+
}
91+
92+
.shadow-lg {
93+
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
94+
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
95+
}
96+
97+
.bg-slate-50 {
98+
--tw-bg-opacity: 1;
99+
background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
100+
}
101+
102+
.inline-block {
103+
display: inline-block;
104+
}
105+
106+
.rounded-full {
107+
border-radius: 9999px;
108+
}
109+
110+
.text-white {
111+
--tw-text-opacity: 1;
112+
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
113+
}
114+
115+
.border-slate-100 {
116+
--tw-border-opacity: 1;
117+
border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
118+
}
119+
120+
.bg-blue-600 {
121+
--tw-bg-opacity: 1;
122+
background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
123+
}
124+
125+
.rounded-xl {
126+
border-radius: .75rem;
127+
}
128+
129+
.text-blue-700 {
130+
--tw-text-opacity: 1;
131+
color: rgb(29 78 216 / var(--tw-text-opacity, 1));
132+
}
133+
134+
.space-y-4>:not([hidden])~:not([hidden]) {
135+
--tw-space-y-reverse: 0;
136+
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
137+
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
138+
}
139+
140+
.text-amber-600 {
141+
--tw-text-opacity: 1;
142+
color: rgb(217 119 6 / var(--tw-text-opacity, 1));
143+
}
144+
145+
.text-blue-600 {
146+
--tw-text-opacity: 1;
147+
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
148+
}
149+
150+
.rounded-xl {
151+
border-radius: .75rem;
152+
}
153+
59154
.theme-doc-markdown menu,
60155
.theme-doc-markdown ol,
61156
.theme-doc-markdown ul {

0 commit comments

Comments
 (0)