企业官网建设流程全解析

在程序员的个人职业成长、季度绩效考核（OKR / KPI）以及年度述职晋升评审中，很多工程师最头疼的事情是：

“我平时埋头写了海量的高质量代码、重构了核心模块、优化了线上死锁，但在写晋升材料或简历时，不知道如何全面、客观、具象化地展现自己的综合技术能力维度与成长轨迹。”

如果只是一段文字自我评价，往往显得空泛主观、缺乏说服力；
而由第三方中立大模型根据开发者整月提交的真实 Commit 日志、解决的技术难点复杂度与重构范式，自动推导生成的“六维工程师能力成长雷达图（Engineer Capability Radar）”，能够为开发者带来极具冲击力的高维能力画像背书！

本文深度拆解基于大语言模型 AST 分析与 SVG 动态雷达图绘制的完整实现方案。

工程师六维能力推导模型

【1. 架构设计力 (Architecture)】 /\ / \ 【6. 业务交付力 (Delivery)】 / \ 【2. 性能调优力 (Performance)】 / ● \ | | | | | | 【5. 工程规范力 (Tooling)】 \ ● / 【3. 安全防御力 (Security)】 \ / \ / \/ 【4. 复杂排障力 (Troubleshooting)】

六大能力维度度量基准：

1. 架构设计力：组件解耦、设计模式（HOC/RenderProps/订阅发布）、微前端分层；
2. 性能调优力：LCP 优化、虚拟滚动、Fiber 切片、慢 SQL 索引覆盖；
3. 安全防御力：CSP 防护、分布式锁防超卖、Token 鉴权、签名校验；
4. 复杂排障力：内存泄漏定位、死锁排查、SourceMap 反解；
5. 工程规范力：TypeScript 强类型覆盖、CI 缓存加速、Tree-Shaking；
6. 业务交付力：功能交付时效、转化率提升、自动化交付。

核心实现：大模型能力打分 Prompt 架构设计

// src/services/capabilityRadarAuditor.ts import OpenAI from 'openai'; const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY }); export interface EngineerRadarData { architecture: number; // 0 ~ 100 performance: number; security: number; troubleshooting: number; tooling: number; delivery: number; levelAssessment: string; // 如 "P7+ 资深全栈架构师" growthHighlight: string; } export const RADAR_AUDIT_PROMPT = ` 你是一位顶级大厂技术评审委员会主席。请深入审查该工程师过去一整个月的所有 Commit 记录与攻坚周报，在六大硬核能力维度上给出 0~100 的客观量化打分与综合级别评定。 【工程师整月研发成果汇编】: {monthlyCommitLogs} 【请输出严格 JSON】: { "architecture": 92, "performance": 95, "security": 88, "troubleshooting": 90, "tooling": 94, "delivery": 96, "levelAssessment": "资深前端/全栈架构师 (具备强大的商业化交付与高并发韧性设计底盘)", "growthHighlight": "本月在微信支付安全分账、Fiber 链表遍历重构与 CI 缓存治理上展现出顶级的架构深度" } `; export async function generateEngineerRadar(commitLogs: string): Promise<EngineerRadarData> { const prompt = RADAR_AUDIT_PROMPT.replace('{monthlyCommitLogs}', commitLogs); const response = await openai.chat.completions.create({ model: 'gpt-4o-mini', temperature: 0.15, response_format: { type: 'json_object' }, messages: [ { role: 'system', content: '你是一位严谨的资深技术评审主席，只输出客观准确的 JSON 评定。' }, { role: 'user', content: prompt } ] }); return JSON.parse(response.choices[0].message.content || '{}'); }

核心实现二：SVG 纯原生动态六维雷达图组件（React + TypeScript）

// src/components/EngineerCapabilityRadarChart.tsx import React from 'react'; import type { EngineerRadarData } from '../services/capabilityRadarAuditor'; export const ModernRadarChart: React.FC<{ data: EngineerRadarData; engineerName: string }> = ({ data, engineerName }) => { const size = 340; const center = size / 2; const radius = center - 45; const dimensions = [ { key: 'architecture', label: '架构设计', val: data.architecture }, { key: 'performance', label: '性能调优', val: data.performance }, { key: 'security', label: '安全防御', val: data.security }, { key: 'troubleshooting', label: '复杂排障', val: data.troubleshooting }, { key: 'tooling', label: '工程规范', val: data.tooling }, { key: 'delivery', label: '业务交付', val: data.delivery } ]; const totalAxes = dimensions.length; // 坐标计算工具函数 const getCoordinates = (index: number, valueRatio: number) => { const angle = (Math.PI * 2 / totalAxes) * index - Math.PI / 2; const r = radius * valueRatio; return { x: center + r * Math.cos(angle), y: center + r * Math.sin(angle) }; }; // 生成雷达图多边形顶点路径 const pointsString = dimensions .map((d, i) => { const { x, y } = getCoordinates(i, d.val / 100); return `${x},${y}`; }) .join(' '); return ( <div className="p-6 bg-white border border-slate-200 rounded-3xl shadow-sm space-y-4 select-none"> <div className="flex justify-between items-center pb-2 border-b"> <div> <span className="px-2.5 py-0.5 bg-blue-50 text-blue-700 text-xs font-bold rounded-full"> AI 工程师能力画像 </span> <h3 className="text-base font-bold text-slate-900 mt-1">{engineerName} · 综合技术能力雷达</h3> </div> <span className="text-xs font-bold text-blue-600 bg-blue-50 px-3 py-1 rounded-xl"> {data.levelAssessment} </span> </div> {/* 纯 SVG 雷达图核心 */} <div className="flex justify-center"> <svg width={size} height={size} className="overflow-visible"> {/* 背景同心多边形网格 (0.25, 0.5, 0.75, 1.0) */} {[0.25, 0.5, 0.75, 1].map((scale) => { const bgPoints = Array.from({ length: totalAxes }) .map((_, i) => { const { x, y } = getCoordinates(i, scale); return `${x},${y}`; }) .join(' '); return <polygon key={scale} points={bgPoints} fill="none" stroke="#f1f5f9" strokeWidth={1.5} />; })} {/* 轴线 */} {dimensions.map((_, i) => { const { x, y } = getCoordinates(i, 1); return <line key={i} x1={center} y1={center} x2={x} y2={y} stroke="#e2e8f0" strokeWidth={1} />; })} {/* 核心数据多边形 (发光渐变填充) */} <polygon points={pointsString} fill="rgba(37, 99, 235, 0.2)" stroke="#2563eb" strokeWidth={2.5} className="transition-all duration-500" /> {/* 各轴顶点圆点与文字标签 */} {dimensions.map((d, i) => { const { x, y } = getCoordinates(i, d.val / 100); const labelPos = getCoordinates(i, 1.2); return ( <g key={d.key}> <circle cx={x} cy={y} r={4} fill="#2563eb" stroke="#ffffff" strokeWidth={2} /> <text x={labelPos.x} y={labelPos.y + 4} textAnchor="middle" fontSize={11} fill="#475569" fontWeight="bold" > {d.label} ({d.val}) </text> </g> ); })} </svg> </div> <div className="p-4 bg-slate-50 rounded-2xl text-xs text-slate-600 leading-relaxed border border-slate-100"> 💡 <strong>本月成长亮点评语</strong>：{data.growthHighlight} </div> </div> ); };

价值收益

1. 具象化个人技术溢价：将原本枯燥的代码提交转化为直观、专业、高质感的六维能力雷达图；
2. 晋升述职与跳槽求职王牌背书：直接导出高清图片附在述职 PPT 或简历作品集封面；
3. 为周报系统赋予了“陪伴开发者长期职业成长”的情感与专业连接。