Skip to content

Commit 5e3c027

Browse files
phodalphodal
committed
feat(implementation): 优化SPARE框架布局，调整网格列数和组件尺寸，增强响应式设计
1 parent 046326d commit 5e3c027

File tree

2 files changed

+31
-77
lines changed

2 files changed

+31
-77
lines changed

‎src/components/SPAREFramework.jsx

+9-77
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,7 @@ export const SPAREFramework = () => {
288288
{/* 支柱得分卡视图 */}
289289
<div className="mb-6">
290290
<h5 className="text-lg font-medium mb-3 text-blue-700">SPARE支柱得分 - 整体健康状况</h5>
291-
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
291+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
292292
{/* 支柱A得分卡 */}
293293
<div className="bg-blue-50 rounded-lg border border-blue-100 p-4 relative">
294294
<div className="flex items-center mb-2">
@@ -335,10 +335,6 @@ export const SPAREFramework = () => {
335335
</div>
336336
</div>
337337
</div>
338-
339-
<div className="absolute bottom-2 right-2">
340-
<button className="text-xs text-blue-600 hover:underline">详情</button>
341-
</div>
342338
</div>
343339

344340
{/* 支柱B得分卡 */}
@@ -387,10 +383,6 @@ export const SPAREFramework = () => {
387383
</div>
388384
</div>
389385
</div>
390-
391-
<div className="absolute bottom-2 right-2">
392-
<button className="text-xs text-green-600 hover:underline">详情</button>
393-
</div>
394386
</div>
395387

396388
{/* 支柱C得分卡 */}
@@ -439,10 +431,6 @@ export const SPAREFramework = () => {
439431
</div>
440432
</div>
441433
</div>
442-
443-
<div className="absolute bottom-2 right-2">
444-
<button className="text-xs text-purple-600 hover:underline">详情</button>
445-
</div>
446434
</div>
447435

448436
{/* 支柱D得分卡 */}
@@ -491,16 +479,12 @@ export const SPAREFramework = () => {
491479
</div>
492480
</div>
493481
</div>
494-
495-
<div className="absolute bottom-2 right-2">
496-
<button className="text-xs text-amber-600 hover:underline">详情</button>
497-
</div>
498482
</div>
499483
</div>
500484
</div>
501485

502486
{/* 多维度趋势图表 */}
503-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
487+
<div className="grid grid-cols-2 gap-6 mb-6">
504488
{/* DORA指标趋势图 */}
505489
<div className="bg-slate-50 p-4 rounded-lg border border-slate-200">
506490
<div className="flex justify-between items-center mb-3">
@@ -558,7 +542,7 @@ export const SPAREFramework = () => {
558542
</div>
559543

560544
{/* 关键AI指标雷达图 */}
561-
<div className="bg-blue-50 p-4 rounded-lg border border-blue-100">
545+
<div className="bg-blue-50 p-4 rounded-lg border border-blue-100 w-90 h-90">
562546
<h6 className="font-medium text-blue-700 mb-3">AI价值实现 - 雷达分析</h6>
563547

564548
{/* 模拟雷达图 */}
@@ -575,8 +559,8 @@ export const SPAREFramework = () => {
575559

576560
{/* 雷达数据多边形 (模拟) */}
577561
<div className="absolute inset-0">
578-
<svg viewBox="-100 -100 200 200">
579-
<polygon points="0,-80 60,-40 45,70 -45,70 -60,-40"
562+
<svg viewBox="-100 -100 200 200" className="w-56 h-56 relative" style={{ left: "16%" }}>
563+
<polygon points="0,-80 76,25 47,77 -47,77 -76,25"
580564
fill="rgba(59, 130, 246, 0.3)" stroke="#3b82f6" strokeWidth="2" />
581565
</svg>
582566
</div>
@@ -610,7 +594,7 @@ export const SPAREFramework = () => {
610594

611595
<div className="overflow-x-auto">
612596
<table className="min-w-full text-sm">
613-
<thead>
597+
<thead className=''>
614598
<tr className="bg-slate-100">
615599
<th className="py-2 px-3 text-left font-medium text-slate-700">SPARE指标</th>
616600
<th className="py-2 px-3 text-left font-medium text-slate-700">当前值</th>
@@ -688,7 +672,7 @@ export const SPAREFramework = () => {
688672
AI建议采纳与代码质量的关联
689673
</h6>
690674
<p className="text-sm text-slate-600 mb-2">
691-
数据表明，AI建议接受率与代码流失率之间存在负相关 (-0.72)。当AI建议接受率超过75%时，代码流失率倾向于增加，表明可能需要更严格的质量审查机制。
675+
数据表明，AI建议接受率与代码流失率之间存在负相关 (-0.72)。当AI建议接受率超过 xx% 时，代码流失率倾向于增加，表明可能需要更严格的质量审查机制。
692676
</p>
693677
<div className="flex space-x-2">
694678
<button className="text-xs border border-blue-200 rounded px-2 py-1 bg-blue-50 text-blue-700 hover:bg-blue-100 transition-colors">
@@ -706,7 +690,7 @@ export const SPAREFramework = () => {
706690
开发者体验改进机会
707691
</h6>
708692
<p className="text-sm text-slate-600 mb-2">
709-
复杂模块中AI采纳率较低(45%)，但对应的开发者满意度也较低。调研数据显示，针对复杂逻辑的AI建议质量是主要痛点。改进AI对复杂业务逻辑的理解能显著提升开发者体验。
693+
复杂模块中AI采纳率较低(xx%)，但对应的开发者满意度也较低。调研数据显示，针对复杂逻辑的AI建议质量是主要痛点。改进AI对复杂业务逻辑的理解能显著提升开发者体验。
710694
</p>
711695
<div className="flex space-x-2">
712696
<button className="text-xs border border-green-200 rounded px-2 py-1 bg-green-50 text-green-700 hover:bg-green-100 transition-colors">
@@ -769,7 +753,7 @@ export const SPAREFramework = () => {
769753
<h6 className="font-medium text-blue-700">AI生成的洞察</h6>
770754
</div>
771755
<p className="text-slate-600 mb-3">
772-
系统分析表明，自引入AI代码审查后，代码缺陷密度下降了18%，但在复杂模块中AI建议的采纳率仅为45%。提升采纳率将有望进一步改善代码质量指标。
756+
系统分析表明，自引入AI代码审查后，代码缺陷密度下降了18%，但在复杂模块中AI建议的采纳率仅为xx%。提升采纳率将有望进一步改善代码质量指标。
773757
</p>
774758
<div className="flex space-x-3">
775759
<button className="text-sm border border-blue-200 rounded px-3 py-1 bg-white text-blue-700 hover:bg-blue-50 transition-colors">
@@ -835,58 +819,6 @@ export const SPAREFramework = () => {
835819
</div>
836820
</div>
837821
</div>
838-
839-
{/* 透镜功能 */}
840-
<div className="border-t border-blue-100 pt-4">
841-
<div className="flex justify-between items-center mb-3">
842-
<h6 className="font-semibold text-blue-700">透镜视角</h6>
843-
<div className="flex space-x-2">
844-
<button className="text-sm border border-blue-200 rounded px-3 py-1 bg-blue-50 text-blue-700 flex items-center">
845-
<Eye className="h-4 w-4 mr-1" />
846-
伦理AI视角
847-
</button>
848-
<button className="text-sm border border-green-200 rounded px-3 py-1 bg-green-50 text-green-700 flex items-center">
849-
<Shield className="h-4 w-4 mr-1" />
850-
安全合规视角
851-
</button>
852-
</div>
853-
</div>
854-
<p className="text-slate-500 italic">
855-
透镜功能允许您从不同视角审视SPARE框架指标，发现潜在问题与机会
856-
</p>
857-
</div>
858-
</div>
859-
860-
{/* 与业务成果关联 */}
861-
<div className="bg-white p-5 rounded-lg shadow mb-6">
862-
<h4 className="text-xl font-semibold mb-3 text-center text-blue-700">与业务成果关联</h4>
863-
<p className="text-slate-600 mb-4 text-center">SPARE框架指标与核心业务目标的直接关联</p>
864-
865-
<div className="grid-3 gap-4">
866-
<div className="p-4 rounded-lg bg-blue-50 border border-blue-100">
867-
<div className="flex items-center mb-2">
868-
<Target className="h-5 w-5 text-blue-600 mr-2" />
869-
<h5 className="font-semibold text-blue-700">更快的上市时间</h5>
870-
</div>
871-
<p className="text-sm text-slate-600">由支柱A (AI辅助任务周期时间) 和支柱B (变更前置时间、部署频率) 共同促进</p>
872-
</div>
873-
874-
<div className="p-4 rounded-lg bg-green-50 border border-green-100">
875-
<div className="flex items-center mb-2">
876-
<Star className="h-5 w-5 text-green-600 mr-2" />
877-
<h5 className="font-semibold text-green-700">改进的产品质量</h5>
878-
</div>
879-
<p className="text-sm text-slate-600">由支柱C (缺陷密度、变更失败率) 和维度D (AI代码漏洞识别) 共同保障</p>
880-
</div>
881-
882-
<div className="p-4 rounded-lg bg-purple-50 border border-purple-100">
883-
<div className="flex items-center mb-2">
884-
<Lightbulb className="h-5 w-5 text-purple-600 mr-2" />
885-
<h5 className="font-semibold text-purple-700">提升的创新能力</h5>
886-
</div>
887-
<p className="text-sm text-slate-600">由支柱A (AI建议的新颖功能) 和支柱B (释放开发者创新时间) 共同驱动</p>
888-
</div>
889-
</div>
890822
</div>
891823
</div>
892824
);

‎src/css/custom.css

+22
Original file line numberDiff line numberDiff line change
@@ -1727,3 +1727,25 @@ button {
17271727
.grid-cols-2 {
17281728
grid-template-columns: repeat(2, minmax(0, 1fr));
17291729
}
1730+
1731+
.sm\:grid-cols-2 {
1732+
@media (min-width: 640px) {
1733+
grid-template-columns: repeat(2, minmax(0, 1fr));
1734+
}
1735+
}
1736+
1737+
.w-64 {
1738+
width: 16rem; /* 256px */
1739+
}
1740+
1741+
.h-64 {
1742+
height: 16rem; /* 256px */
1743+
}
1744+
1745+
.w-90 {
1746+
width: 22.5rem; /* 360px */
1747+
}
1748+
1749+
.h-90 {
1750+
height: 22.5rem; /* 360px */
1751+
}

0 commit comments

Comments
 (0)