2025-q1-review
HTML 内容预览
查看 HTML 源代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>团队汇报 - 2025-Q1 Review</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/theme/black.css" id="theme">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<!-- 添加Font Awesome用于思考图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* 优化后的自定义样式，强调科技感和舒适度 */
.reveal {
font-family: 'Roboto', sans-serif;
color: #f0f0f0;
background: linear-gradient(135deg, #0a192f 0%, #121212 100%);
font-size: 90%;
transition: background 0.5s ease;
}
.reveal h1 {
font-size: 2.5em;
color: #00bcd4;
text-shadow: 0 0 15px rgba(0, 188, 212, 0.7);
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.reveal h2 {
font-size: 1.8em;
color: #00bcd4;
text-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.reveal h3 {
font-size: 1.5em;
color: #4caf50;
text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.reveal h4 {
font-size: 1.3em;
color: #ffeb3b;
text-shadow: 0 0 8px rgba(255, 235, 59, 0.4);
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.reveal p {
font-size: 1.0em;
color: #e0e0e0;
line-height: 1.8;
transition: color 0.3s ease;
}
/* 为.summary-box下的p标签添加特定间距 */
.summary-box p {
margin-bottom: 15px; /* 增加段落间距，确保行间有适当距离 */
}
.reveal ul, .reveal li {
font-size: 1.0em;
line-height: 1.8;
}
/* 新增多列列表样式，仅用于ul列表 */
.multi-column-list {
column-count: 2; /* 分两列显示 */
-webkit-column-count: 2; /* 兼容WebKit浏览器 */
-moz-column-count: 2; /* 兼容Firefox */
column-gap: 20px; /* 列间距 */
margin: 10px 0; /* 调整外边距 */
}
/* 自定义class仅用于个人思考部分的间距调整 */
.thought-list li {
margin-bottom: 15px;
}
/* 质量分析表格特定样式，增大字体 */
.quality-table {
font-size: 1.2em; /* 增大字体大小，从0.9em改为1.1em */
}
.reveal table {
width: 100%;
border-collapse: collapse;
margin: 20px auto;
font-size: 0.9em;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.reveal th, .reveal td {
border: 1px solid #444;
padding: 10px !important;
text-align: left;
transition: background-color 0.3s ease;
}
.reveal th {
background-color: #00bcd4;
color: #fff;
}
.reveal td:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.chart-container {
width: 80%; /* 保持原有宽度设置 */
margin: 20px auto;
background: linear-gradient(135deg, rgba(0, 188, 212, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
border-radius: 15px;
padding: 20px;
box-shadow: 0 0 25px rgba(0, 188, 212, 0.4);
transition: box-shadow 0.3s ease;
}
.chart-container:hover {
box-shadow: 0 0 30px rgba(0, 188, 212, 0.6);
}
.summary-box {
background: linear-gradient(135deg, rgba(0, 188, 212, 0.15) 0%, rgba(0, 0, 0, 0.1) 100%);
padding: 15px;
border-radius: 12px;
margin: 25px 0;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
font-size: 1.0em;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.summary-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.reveal .fragment.highlight-blue {
color: #00bcd4;
}
/* 调整间距，确保内容间有适当的margin */
.section-content {
margin-bottom: 35px;
padding: 15px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.section-content:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}
/* 针对首页（起始页）增大字体 */
.home-title h1 {
font-size: 3.0em;
}
.home-title h3 {
font-size: 2.0em;
}
/* 动画效果和整体居中 */
.reveal .slides section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
/* hover效果统一 */
.reveal h1:hover, .reveal h2:hover, .reveal h3:hover, .reveal h4:hover, .reveal p:hover {
text-shadow: 0 0 20px rgba(0, 188, 212, 0.8);
}
/* 针对个人思考部分的优化样式 */
.thought-list {
list-style: none;
padding: 0;
}
.thought-list li {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
padding: 10px 15px;
background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.thought-list li:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}
.thought-icon {
margin-right: 15px;
color: #4caf50;
font-size: 1.5em;
}
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- 更新后的标题页（首页），添加class="home-title" -->
<section class="home-title" data-background-color="#0a192f">
<h1>2025-Q1 Review</h1>
<h3>前端技术组</h3>
<p>汇报人: 钱宏</p>
</section>
<!-- 第二页：按业务投入，仅列表分两列，图表保持原样 -->
<section>
<h2>按业务投入</h2>
<p>业务类型工作量汇总：</p>
<ul class="multi-column-list"> <!-- 添加多列类，仅列表分两列 -->
<li>DTC: 36.2 人日</li>
<li>Saas软件: 152.5 人日</li>
<li>法务: 0.5 人日</li>
<li>履约: 19.8 人日</li>
<li>环世技术支撑: 11 人日</li>
<li>技术支撑: 14.5 人日</li>
<li>船东: 67.8 人日</li>
<li>财务: 0.2 人日</li>
<li>营销-直客: 20.3 人日</li>
</ul>
<div class="chart-container">
<canvas id="businessChart"></canvas>
</div>
<!-- <div class="fragment fade-in">
<h4>排名前3业务投入总结</h4>
<div class="summary-box">
<p>1. Saas软件 (152.5 人日): 占主导地位，反映了软件开发和维护的核心投入，建议持续优化以提升效率。</p>
<p>2. 船东 (67.8 人日): 显著投入，表明船东相关业务是关键领域，可能涉及系统集成和数据交换。</p>
<p>3. DTC (36.2 人日): 稳步增长，聚焦于直接客户交互，AI应用潜力大，可探索自动化优化。</p>
</div>
</div> -->
</section>
<!-- 第三页：按项目投入，仅列表分两列，图表保持原样 -->
<section>
<h3>按项目投入（仅排名前5）</h3>
<p>项目工作量汇总（排名前5，基于工作量排序）：</p>
<ul class="multi-column-list"> <!-- 添加多列类，仅列表分两列 -->
<li>GM1国际化: 47 人日</li>
<li>中联门户V3.0: 25.5 人日</li>
<li>欧洲ICS2-ENS: 25.5 人日</li>
<li>客户画像2.2: 19.3 人日</li>
<li>欧洲ICS2-ENS（GM2）: 16.8 人日</li>
</ul>
<div class="chart-container">
<canvas id="projectChart"></canvas>
</div>
<!-- <div class="fragment fade-in">
<h4>排名前5项目投入总结</h4>
<div class="summary-box">
<p>1. GM1国际化 (47 人日): 国际化需求驱动，建议深化AI应用以加速跨语言支持。</p>
<p>2. 中联门户V3.0 (25.5 人日): 系统升级重点，体现了门户优化对业务的影响，需关注AI集成。</p>
<p>3. 欧洲ICS2-ENS (25.5 人日): 合规性项目，AI可用于自动化数据处理，提升效率。</p>
<p>4. 客户画像2.2 (19.3 人日): 数据分析核心，AI模型可进一步增强预测能力。</p>
<p>5. 欧洲ICS2-ENS（GM2） (16.8 人日): 扩展项目，建议探索AI在故障预测中的应用。</p>
</div>
</div> -->
</section>
<!-- 质量分析部分：保持原样，未修改 -->
<section>
<h2>质量分析</h2>
<table class="quality-table">
<thead>
<tr>
<th>故障等级</th>
<th>BMS</th>
<th>业务</th>
<th>单证/报表</th>
<th>业务管理</th>
<th>基础资料</th>
<th>增值服务</th>
<th>权限设置</th>
<th>订单管理</th>
<th>财务凭证接口</th>
<th>财务管理</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>P2-重要紧急</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>7</td>
</tr>
<tr>
<td>P3-重要不紧急</td>
<td>2</td>
<td>2</td>
<td>0</td>
<td>8</td>
<td>1</td>
<td>6</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>4</td>
<td>26</td>
</tr>
<tr>
<td>唯一问题合计</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>8</td>
<td>1</td>
<td>9</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>33</td>
</tr>
</tbody>
</table>
<div class="fragment fade-in">
<h4>质量分析总结</h4>
<div class="summary-box">
<p>P2故障刚好达标，P3故障个数还是多了挺多</p> <!-- 第一行 -->
<p>主要集中在业务管理和增值服务，虽然有一部分是历史遗留，但是还是要加强质量建设</p> <!-- 第二行 -->
<p>不然给用户的使用体验会不是很好</p> <!-- 第三行 -->
</div>
</div>
</section>
<!-- 优化后的团队交流部分，保持fragment效果 -->
<section>
<h2>团队交流</h2>
<div class="section-content fragment fade-in">
<h3>1. 技术分享会议</h3>
<ul>
<li><strong>前端优化改进</strong>：@王思杰分享列表表头固定技术；@钱宏分享Swagger生成前端模版工具。</li>
<li><strong>跨平台兼容性</strong>：@周恺琳分享Mac/Windows兼容问题修复和前端框架手册。</li>
<li><strong>AI和工具开发</strong>：@王思杰分享Langchain AI解析PDF、钉钉小程序优化和MCP配置DEMO。</li>
</ul>
</div>
<div class="section-content fragment fade-in">
<h3>2. 周会讨论</h3>
<p>主题：团队成员分享了对AI的看法，以及AI对未来工作和生活的影响。</p>
</div>
<div class="section-content fragment fade-in">
<h3>3. 团队学习活动</h3>
<ul>
<li>LLM Multi-Agent学习：完成MetaGPT课程案例部署。</li>
<li>LLM Agent课程：分享AutoGPT框架演示。</li>
<li>推荐OpenAI Agent SDK：作为AI开发入门工具。</li>
</ul>
</div>
</section>
<!-- 优化后的个人决策与AI使用状况部分，保持fragment效果 -->
<section>
<h2>个人决策部分</h2>
<div class="section-content fragment fade-in">
<h3>1. 个人决策</h3>
<ul>
<li>调整团队会议频率：每两周的技术交流会改为每周都涉及AI话题</li>
<li>增加AI投入：学习使用AI工具/框架，带动团队建立AI学习氛围。同时对于组员也有AI方面的要求</li>
<li>部分业务安排下放：各条业务线，有专职的前端同学进行需求/任务的收口，简单的任务安排可自行决策，有需要支持时再介入</li>
</ul>
</div>
<div class="section-content fragment fade-in">
<h3>2. 决策收益（结果）</h3>
<ul>
<li>所有成员建立个人AI辅助编程环境。形成一定的AI交流氛围</li>
<li>AI工具落地：@王思杰分享MCP知识和自主编写的Gitlab MCP工具；@周恺琳实现基于Swagger的自动生成代码MCP工具</li>
<li>部分成员希望通过AI尝试业务功能开发，建议鼓励更多实践</li>
<li>部分成员的主动性有所增加，能自主安排一些任务</li>
<li>个人分散的时间投入减少，可以更聚焦一些需要长时间投入的问题上</li>
</ul>
</div>
</section>
<!-- 优化后的个人思考部分，保持原有效果 -->
<section>
<h2>个人思考</h2>
<div class="section-content">
<ul class="thought-list">
<li class="fragment fade-in">
<i class="fas fa-lightbulb thought-icon"></i>
AI发展迅猛，模型和工具不断涌现和更迭。我们需调整工作方式，逐步找到并适应AI时代的新范式。人永远无法感知自己认知之外的事物，AI的上限一定程度上取决于我们的上限。接下来也会花更多的精力Focus在AI这个方面。
</li>
<li class="fragment fade-in">
<i class="fas fa-brain thought-icon"></i>
业务（应用）层面，国内更多的还是对结果付费，而不是对提效付费，所以，在AI的投入和产出上，衡量的还是有没有带来直接的结果。但是在个人拥抱AI的层面，我觉得还是以提效为主，只有先提效了，才能有时间去想、去做更多的事情。
</li>
<li class="fragment fade-in">
<i class="fas fa-thought-bubble thought-icon"></i>
技术的突破，往往并不能直接带来幸福感，有时候是更“苦逼”的工作和生活。在技术之上，还需要“哲学”层面（或是思想）的突破，来进行对冲，来获得幸福感。
</li>
</ul>
</div>
</section>
<!-- 结尾页 -->
<section data-background-color="#0a192f">
<h2>快乐工作！</h2>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script>
// 初始化 Reveal.js
Reveal.initialize({
controls: true,
progress: true,
center: true,
transition: 'slide',
transitionSpeed: 'fast'
});
// 绘制图表 - 业务投入柱状图
document.addEventListener('DOMContentLoaded', function() {
var ctxBusiness = document.getElementById('businessChart').getContext('2d');
new Chart(ctxBusiness, {
type: 'bar',
data: {
labels: ['DTC', 'Saas软件', '法务', '履约', '环世技术支撑', '技术支撑', '船东', '财务', '营销-直客'],
datasets: [{
label: '实际工作量（人日）',
data: [36.2, 152.5, 0.5, 19.8, 11, 14.5, 67.8, 0.2, 20.3],
backgroundColor: '#00bcd4',
borderColor: '#00796b',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
x: {
grid: {
display: false
}
}
}
}
});
// 绘制图表 - 项目投入柱状图（仅显示前5项目）
var ctxProject = document.getElementById('projectChart').getContext('2d');
new Chart(ctxProject, {
type: 'bar',
data: {
labels: ['GM1国际化', '中联门户V3.0', '欧洲ICS2-ENS', '客户画像2.2', '欧洲ICS2-ENS（GM2）'],
datasets: [{
label: '实际工作量（人日）',
data: [47, 25.5, 25.5, 19.3, 16.8],
backgroundColor: '#00bcd4',
borderColor: '#00796b',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
x: {
grid: {
display: false
}
}
}
}
});
});
</script>
</body>
</html>
内容长度: 18374 字节