```json | XinShi Web builder

By admin, 12 June, 2025

推理

我们将在现有的人员对比组件基础上添加历史对比功能。历史对比通常需要展示不同时间点的数据变化，因此我们可以添加一个时间轴或者下拉选择器来选择历史日期，然后更新对比数据。

考虑到组件复杂度，我们将添加一个简单的时间轴选择器，允许用户选择不同的时间段（例如：近3个月、近半年、近一年）来查看历史数据对比。

由于是静态展示，我们将模拟不同时间段的数据变化。在实际应用中，这些数据应该来自后端API。

修改点：
1. 在标题下方添加一个时间选择控件
2. 为每个人员卡片添加历史数据对比的折线图，展示关键指标的变化趋势
3. 在综合能力对比分析区域，增加历史对比的说明

我们将使用简单的折线图SVG来展示趋势。

注意：由于是静态代码，我们无法动态更新数据，因此我们将展示两个时间点的数据（当前和历史）进行对比。

为了不使代码过于复杂，我们为每个人员添加一个折线图，展示项目完成率的历史变化。

步骤：
1. 添加时间选择器（这里使用单选按钮模拟）
2. 在每个人员卡片中增加一个折线图区域，展示项目完成率的历史趋势
3. 在综合对比区域，增加一个历史对比的折线图（两人对比）

由于空间有限，我们将折线图放在柱状图下方。

注意：移动端适配，折线图可能会换行显示。

我们将使用两个时间点：当前和3个月前。

代码修改如下：

角色

assistant

content

```json
{
"widget": {
"type": "custom-template",
"isAPI": false,
"fullWidth": false,
"html": "<div class=\"container mx-auto px-4 py-8\">\n <div class=\"text-center mb-10\">\n <h2 class=\"text-3xl font-bold text-gray-800 mb-2\">人员信息历史对比</h2>\n <p class=\"text-gray-600\">综合比较团队成员的历史表现与当前能力</p>\n \n <div class=\"mt-6 flex flex-wrap justify-center gap-4\">\n <button class=\"px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors duration-300\">\n 当前对比\n </button>\n <button class=\"px-4 py-2 bg-white border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition-colors duration-300\">\n 3个月历史\n </button>\n <button class=\"px-4 py-2 bg-white border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition-colors duration-300\">\n 6个月历史\n </button>\n <button class=\"px-4 py-2 bg-white border border-gray-300 rounded-lg font-medium hover:bg-gray-50 transition-colors duration-300\">\n 1年历史\n </button>\n </div>\n </div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n \n <div class=\"bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg\">\n <div class=\"p-6\">\n <div class=\"flex items-center mb-6\">\n <div class=\"relative\">\n <img src=\"/assets/images/avatar/01.jpeg\" alt=\"人员1\" class=\"w-20 h-20 rounded-full object-cover border-4 border-white shadow-md\">\n <div class=\"absolute bottom-0 right-0 w-6 h-6 bg-blue-500 rounded-full border-2 border-white\"></div>\n </div>\n <div class=\"ml-4\">\n <h3 class=\"text-xl font-bold text-gray-800\">张明</h3>\n <p class=\"text-gray-600\">高级产品经理</p>\n </div>\n </div>\n \n \n <div class=\"mb-6\">\n <h4 class=\"text-gray-700 font-medium mb-3 text-center\">历史能力变化趋势</h4>\n <div class=\"relative h-40\">\n <svg viewBox=\"0 0 400 150\" class=\"w-full h-full\">\n \n <line x1=\"40\" y1=\"20\" x2=\"40\" y2=\"130\" stroke=\"#e5e7eb\" stroke-width=\"1\" />\n <line x1=\"40\" y1=\"130\" x2=\"380\" y2=\"130\" stroke=\"#e5e7eb\" stroke-width=\"1\" />\n \n \n <text x=\"30\" y=\"25\" text-anchor=\"end\" font-size=\"10\" fill=\"#6b7280\">100%</text>\n <text x=\"30\" y=\"75\" text-anchor=\"end\" font-size=\"10\" fill=\"#6b7280\">50%</text>\n <text x=\"30\" y=\"130\" text-anchor=\"end\" font-size=\"10\" fill=\"#6b7280\">0%</text>\n \n \n <text x=\"100\" y=\"145\" text-anchor=\"middle\" font-size=\"10\" fill=\"#6b7280\">3月前</text>\n <text x=\"200\" y=\"145\" text-anchor=\"middle\" font-size=\"10\" fill=\"#6b7280\">2月前</text>\n <text x=\"300\" y=\"145\" text-anchor=\"middle\" font-size=\"10\" fill=\"#6b7280\">当前</text>\n \n \n <polyline points=\"40,110 100,90 200,100 300,75\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"2\" stroke-dasharray=\"4\" />\n <polyline points=\"40,110 100,90 200,100 300,94\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"2\" />\n <text x=\"350\" y=\"80\" text-anchor=\"start\" font-size=\"10\" fill=\"#3b82f6\">项目完成率</text>\n \n \n <polyline points=\"40,90 100,70 200,60 300,50\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" stroke-dasharray=\"4\" />\n <polyline points=\"40,90 100,70 200,60 300,88\" fill=\"none\" stroke=\"#10b981\" stroke-width=\"2\" />\n <text x=\"350\" y=\"55\" text-anchor=\"start\" font-size=\"10\" fill=\"#10b981\">协作能力</text>\n \n \n <circle cx=\"300\" cy=\"75\" r=\"4\" fill=\"#3b82f6\" />\n <circle cx=\"300\" cy=\"94\" r=\"4\" fill=\"#3b82f6\" />\n <circle cx=\"300\" cy=\"50\" r=\"4\" fill=\"#10b981\" />\n <circle cx=\"300\" cy=\"88\" r=\"4\" fill=\"#10b981\" />\n </svg>\n </div>\n <div class=\"mt-4 text-center text-sm text-gray-600\">\n 虚线: 3个月前 | 实线: 当前\n </div>\n </div>\n \n \n <div class=\"mb-6\">\n <h4 class=\"text-gray-700 font-medium mb-3 text-center\">能力雷达图对比</h4>\n <div class=\"flex justify-center gap-6\">\n \n <div class=\"relative w-32 h-32 opacity-50\">\n <svg viewBox=\"0 0 100 100\" class=\"w-full h-full\">\n <polygon points=\"50,10 70,30 80,60 70,90 30,90 20,60 30,30\" fill=\"none\" stroke=\"#e5e7eb\" stroke-width=\"1\" />\n <polygon points=\"50,45 55,50 58,60 55,70 45,70 42,60 45,50\" fill=\"rgba(59, 130, 246, 0.1)\" stroke=\"#3b82f6\" stroke-width=\"1\" />\n </svg>\n </div>\n \n <div class=\"relative w-32 h-32\">\n <svg viewBox=\"0 0 100 100\" class=\"w-full h-full\">\n <polygon points=\"50,10 70,30 80,60 70,90 30,90 20,60 30,30\" fill=\"none\" stroke=\"#e5e7eb\" stroke-width=\"1\" />\n <polygon points=\"50,45 58,50 62,60 58,70 42,70 38,60 42,50\" fill=\"rgba(59, 130, 246, 0.2)\" stroke=\"#3b82f6\" stroke-width=\"1.5\" />\n </svg>\n </div>\n </div>\n </div>\n \n \n <div class=\"bg-blue-50 rounded-lg p-4 mb-4\">\n <h4 class=\"text-blue-800 font-medium mb-2\">历史评价</h4>\n <p class=\"text-sm text-blue-700\">过去3个月中，项目完成率提升19%，协作能力显著增强，在跨部门项目中表现突出。</p>\n </div>\n </div>\n </div>\n \n \n <div class=\"bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg\">\n <div class=\"p-6\">\n <div class=\"flex items-center mb-6\">\n <div class=\"relative\">\n <img src=\"/assets/images/avatar/02.jpeg\" alt=\"人员2\" class=\"w-20 h-20 rounded-full object-cover border-4 border-white shadow-md\">\n <div class=\"absolute bottom-0 right-0 w-6 h-6 bg-purple-500 rounded-full border-2 border-white\"></div>\n </div>\n <div class=\"ml-4\">\n <h3 class=\"text-xl font-bold text-gray-800\">李华</h3>\n <p class=\"text-gray-600\">技术负责人</p>\n </div>\n </div>\n \n \n <div class=\"mb-6\">\n <h4 class=\"text-gray-700 font-medium mb-3 text-center\">历史能力变化趋势</h4>\n <div class=\"relative h-40\">\n <svg viewBox=\"0 0 400 150\" class=\"w-full h-full\">\n \n <line x1=\"40\" y1=\"20\" x2=\"40\" y2=\"130\" stroke=\"#e5e7eb\" stroke-width=\"1\" />\n <line x1=\"40\" y1=\"130\" x2=\"380\" y2=\"130\" stroke=\"#e5e7eb\" stroke-width=\"1\" />\n \n \n <text x=\"30\" y=\"25\" text-anchor=\"end\" font-size=\"10\" fill=\"#6b7280\">100%</text>\n <text x=\"30\" y=\"75\" text-anchor=\"end\" font-size=\"10\" fill=\"#6b7280\">50%</text>\n <text x=\"30\" y=\"130\" text-anchor=\"end\" font-size=\"10\" fill=\"#6b7280\">0%</text>\n \n \n <text x=\"100\" y=\"145\" text-anchor=\"middle\" font-size=\"10\" fill=\"#6b7280\">3月前</text>\n <text x=\"200\" y=\"145\" text-anchor=\"middle\" font-size=\"10\" fill=\"#6b7280\">2月前</text>\n <text x=\"300\" y=\"145\" text-anchor=\"middle\" font-size=\"10\" fill=\"#6b7280\">当前</text>\n \n \n <polyline points=\"40,100 100,95 200,97 300,98\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"2\" stroke-dasharray=\"4\" />\n <polyline points=\"40,100 100,95 200,97 300,98\" fill=\"none\" stroke=\"#8b5cf6\" stroke-width=\"2\" />\n <text x=\"350\" y=\"95\" text-anchor=\"start\" font-size=\"10\" fill=\"#8b5cf6\">项目完成率</text>\n \n \n <polyline points=\"40,70 100,80 200,85 300,85\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"2\" stroke-dasharray=\"4\" />\n <polyline points=\"40,70 100,80 200,85 300,95\" fill=\"none\" stroke=\"#ec4899\" stroke-width=\"2\" />\n <text x=\"350\" y=\"90\" text-anchor=\"start\" font-size=\"10\" fill=\"#ec4899\">问题解决</text>\n \n \n <circle cx=\"300\" cy=\"98\" r=\"4\" fill=\"#8b5cf6\" />\n <circle cx=\"300\" cy=\"98\" r=\"4\" fill=\"#8b5cf6\" />\n <circle cx=\"300\" cy=\"85\" r=\"4\" fill=\"#ec4899\" />\n <circle cx=\"300\" cy=\"95\" r=\"4\" fill=\"#ec4899\" />\n </svg>\n </div>\n <div class=\"mt-4 text-center text-sm text-gray-600\">\n 虚线: 3个月前 | 实线: 当前\n </div>\n </div>\n \n \n <div class=\"mb-6\">\n <h4 class=\"text-gray-700 font-medium mb-3 text-center\">能力雷达图对比</h4>\n <div class=\"flex justify-center gap-6\">\n \n <div class=\"relative w-32 h-32 opacity-50\">\n <svg viewBox=\"0 0 100 100\" class=\"w-full h-full\">\n <polygon points=\"50,10 70,30 80,60 70,90 30,90 20,60 30,30\" fill=\"none\" stroke=\"#e5e7eb\" stroke-width=\"1\" />\n <polygon points=\"50,40 60,50 65,70 60,80 40,80 35,70 40,50\" fill=\"rgba(139, 92, 246, 0.1)\" stroke=\"#8b5cf6\" stroke-width=\"1\" />\n </svg>\n </div>\n \n <div class=\"relative w-32 h-32\">\n <svg viewBox=\"0 0 100 100\" class=\"w-full h-full\">\n <polygon points=\"50,10 70,30 80,60 70,90 30,90 20,60 30,30\" fill=\"none\" stroke=\"#e5e7eb\" stroke-width=\"1\" />\n <polygon points=\"50,35 63,45 68,60 63,80 37,80 32,60 37,45\" fill=\"rgba(139, 92, 246, 0.2)\" stroke=\"#8b5cf6\" stroke-width=\"1.5\" />\n </svg>\n </div>\n </div>\n </div>\n \n \n <div class=\"bg-purple-50 rounded-lg p-4 mb-4\">\n <h4 class=\"text-purple-800 font-medium mb-2\">历史评价</h4>\n <p class=\"text-sm text-purple-700\">问题解决能力显著提升25%，持续保持高项目完成率，技术领导力进一步增强。</p>\n </div>\n </div>\n </div>\n </div>\n \n \n <div class=\"mt-12 bg-white rounded-xl shadow-md p-6\">\n <h4 class=\"text-gray-800 font-bold text-center mb-6\">历史能力对比分析</h4>\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n \n <div>\n <h5 class=\"text-gray-700 font-medium mb-4 text-center\">能力成长指数对比</h5>\n <div class=\"flex items-end justify-center h-32 gap-10\">\n <div class=\"flex flex-col items-center\">\n <div class=\"text-sm text-gray-600 mb-1\">张明</div>\n <div class=\"w-12 bg-blue-200 rounded-t-lg\" style=\"height: 100px\">\n <div class=\"bg-blue-600 rounded-t-lg w-full h-3/5\"></div>\n </div>\n <div class=\"text-sm text-blue-600 font-medium mt-1\">+22%</div>\n </div>\n \n <div class=\"flex flex-col items-center\">\n <div class=\"text-sm text-gray-600 mb-1\">李华</div>\n <div class=\"w-12 bg-purple-200 rounded-t-lg\" style=\"height: 100px\">\n <div class=\"bg-purple-600 rounded-t-lg w-full h-2/5\"></div>\n </div>\n <div class=\"text-sm text-purple-600 font-medium mt-1\">+15%</div>\n </div>\n </div>\n </div>\n \n \n <div>\n <h5 class=\"text-gray-700 font-medium mb-4 text-center\">关键历史里程碑</h5>\n <div class=\"space-y-3\">\n <div class=\"flex items-start\">\n <div class=\"bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1\">\n <span class=\"text-xs font-bold\">张</span>\n </div>\n <div class=\"ml-3\">\n <p class=\"text-sm text-gray-800 font-medium\">完成A项目重构</p>\n <p class=\"text-xs text-gray-500\">3个月前 | 效率提升40%</p>\n </div>\n </div>\n \n <div class=\"flex items-start\">\n <div class=\"bg-purple-100 text-purple-800 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1\">\n <span class=\"text-xs font-bold\">李</span>\n </div>\n <div class=\"ml-3\">\n <p class=\"text-sm text-gray-800 font-medium\">技术团队优化</p>\n <p class=\"text-xs text-gray-500\">2个月前 | 问题解决率提升25%</p>\n </div>\n </div>\n \n <div class=\"flex items-start\">\n <div class=\"bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mt-1\">\n <span class=\"text-xs font-bold\">张</span>\n </div>\n <div class=\"ml-3\">\n <p class=\"text-sm text-gray-800 font-medium\">跨部门协作机制</p>\n <p class=\"text-xs text-gray-500\">1个月前 | 协作评分提升35%</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"mt-8 text-center\">\n <button class=\"px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-300 transform hover:-translate-y-1\">\n 导出历史对比报告\n </button>\n </div>\n </div>\n</div>"
},
"next": ["添加时间轴选择器","增加更多历史节点","添加数据筛选","支持PDF导出","添加动画效果"],
"summary": "已添加历史对比功能，包含时间轴图表、历史雷达图对比、能力成长指数可视化以及关键里程碑展示。使用虚线表示历史数据，实线表示当前数据，直观展示人员能力变化趋势。"
}
```