hunter/tmp
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cfc96e37c067ce662d55643b9dc19cb55c37ae94
tmp/ppts.html

931 lines
2.8 MiB
HTML
Raw Normal View History

初始化项目
2026-05-25 19:52:24 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AI+OPC培训团队协作经验分享</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Source+Code+Pro:wght@400;600;700&family=Roboto+Flex:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0f; font-family: "Noto Sans SC", sans-serif; }
.presentation-container {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.slide-viewport {
width: 1280px; height: 720px;
position: relative; overflow: hidden;
border-radius: 8px;
box-shadow: 0 0 60px rgba(21,133,122,0.08), 0 0 120px rgba(21,133,122,0.04);
}
.slide {
position: absolute; top: 0; left: 0;
width: 1280px; height: 720px;
opacity: 0; transform: scale(0.96);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
overflow: hidden;
}
.slide.active {
opacity: 1; transform: scale(1);
pointer-events: auto;
}
/* Progress bar */
.progress-bar {
position: fixed; top: 0; left: 0; height: 3px;
background: linear-gradient(90deg, #15857A, #20c9b0);
transition: width 0.4s ease;
z-index: 100;
box-shadow: 0 0 10px rgba(21,133,122,0.6);
}
/* Navigation buttons */
.nav-btn {
position: fixed; top: 50%; transform: translateY(-50%);
width: 52px; height: 52px;
border-radius: 50%; border: 1px solid rgba(21,133,122,0.3);
background: rgba(17,17,17,0.6);
backdrop-filter: blur(8px);
color: #15857A; font-size: 28px;
cursor: pointer; z-index: 50;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s ease;
}
.nav-btn:hover {
background: rgba(21,133,122,0.15);
border-color: rgba(21,133,122,0.6);
box-shadow: 0 0 20px rgba(21,133,122,0.3);
}
.nav-btn.prev { left: 24px; }
.nav-btn.next { right: 24px; }
.nav-btn:disabled { opacity: 0.2; cursor: default; }
/* Slide counter */
.slide-counter {
position: fixed; bottom: 20px; right: 32px;
color: rgba(21,133,122,0.6); font-size: 14px;
font-family: "Source Code Pro", monospace;
z-index: 50;
}
/* Timer */
.timer-display {
position: fixed; top: 12px; right: 32px;
color: rgba(21,133,122,0.7);
font-family: "Source Code Pro", monospace;
font-size: 15px;
z-index: 60;
letter-spacing: 1px;
}
/* Glow effects */
.glow-text {
color: #15857A;
text-shadow: 0 0 10px rgba(21,133,122,0.5), 0 0 20px rgba(21,133,122,0.3), 0 0 30px rgba(21,133,122,0.15);
}
.glow-accent {
color: #FF6A3B;
text-shadow: 0 0 10px rgba(255,106,59,0.5), 0 0 20px rgba(255,106,59,0.3);
}
.glow-text-strong {
color: #1ee8c8;
text-shadow: 0 0 15px rgba(30,232,200,0.6), 0 0 30px rgba(30,232,200,0.35), 0 0 50px rgba(30,232,200,0.2);
}
.title-font { font-family: "Noto Sans SC", sans-serif; }
.code-font { font-family: "Source Code Pro", monospace; }
/* Animated background particles */
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
50% { transform: translateY(-20px) rotate(180deg); opacity: 0.6; }
}
.bg-particle {
position: absolute; border-radius: 50%;
background: rgba(21,133,122,0.08);
animation: float 8s ease-in-out infinite;
}
/* Slide content helper classes */
.slide-header {
height: 80px; display: flex; align-items: center; padding: 0 48px;
border-bottom: 1px solid rgba(21,133,122,0.15);
flex-shrink: 0;
}
.slide-body { flex: 1; padding: 24px 48px; overflow: hidden; }
.card {
padding: 16px; border-radius: 10px;
background: rgba(21,133,122,0.06);
border: 1px solid rgba(21,133,122,0.15);
transition: all 0.3s ease;
}
.card:hover { border-color: rgba(21,133,122,0.4); background: rgba(21,133,122,0.1); }
.card-accent {
padding: 16px; border-radius: 10px;
background: rgba(255,106,59,0.06);
border: 1px solid rgba(255,106,59,0.2);
}
.material-icons{width: 1em;direction: rtl;}
/* Review image overlay */
.review-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
z-index: 90;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.85);
opacity: 0; pointer-events: none;
transition: opacity 0.5s ease;
backdrop-filter: blur(6px);
}
.review-overlay.active {
opacity: 1; pointer-events: auto;
}
.review-overlay img {
max-width: 80vw; max-height: 80vh;
border-radius: 12px;
box-shadow: 0 0 40px rgba(21,133,122,0.15), 0 0 80px rgba(21,133,122,0.08);
border: 2px solid rgba(21,133,122,0.25);
transform: scale(0.92);
transition: transform 0.5s ease;
}
.review-overlay.active img {
transform: scale(1);
}
.review-overlay .hint {
position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
color: rgba(21,133,122,0.6);
font-size: 14px;
display: flex; align-items: center; gap: 8px;
animation: pulse-hint 2s ease-in-out infinite;
}
@keyframes pulse-hint {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.9; }
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<div class="presentation-container">
<div class="slide-viewport" id="slideViewport">
<!-- ==================== SLIDE 1: TITLE ==================== -->
<div class="slide active" data-slide="0" style="background: #0a0a0f;">
<div class="absolute inset-0 z-0">
<div class="bg-particle" style="width:200px;height:200px;top:-40px;left:-60px;animation-delay:0s;"></div>
<div class="bg-particle" style="width:150px;height:150px;bottom:20px;right:-30px;animation-delay:2s;"></div>
<div class="bg-particle" style="width:100px;height:100px;top:40%;right:10%;animation-delay:4s;"></div>
</div>
<div class="relative z-10 flex flex-col justify-center items-center h-full">
<div class="mb-5">
<i class="material-icons glow-text-strong" style="font-size: 68px">psychology</i>
</div>
<h1 class="title-font font-black text-5xl mb-6 leading-tight glow-text-strong tracking-wide text-center">
AI+OPC培训团队协作经验分享
</h1>
<div class="w-80 h-0.5 mx-auto mb-6" style="background: linear-gradient(90deg, transparent, #15857A, #20c9b0, #15857A, transparent)"></div>
<p class="text-xl font-light tracking-widest" style="color: #c8c8c8">
从项目管理到高效开发的实践探索
</p>
<div class="absolute bottom-10 left-0 right-0 flex justify-center gap-10 z-10">
<div class="flex items-center gap-2"><i class="material-icons glow-text" style="font-size:20px">person</i><span class="text-sm" style="color:#999">洪涛</span></div>
<div class="flex items-center gap-2"><i class="material-icons glow-text" style="font-size:20px">business</i><span class="text-sm" style="color:#999">昆山市公安局网安大队</span></div>
<div class="flex items-center gap-2"><i class="material-icons glow-text" style="font-size:20px">calendar_today</i><span class="text-sm" style="color:#999">2026年5月25日</span></div>
</div>
</div>
<div class="notes-text" style="display:none">
大家好，感谢各位参加今天的分享。我是本次AI+OPC培训中的一个小组的成员，今天我要从<strong>项目管理</strong>和<strong>团队协作</strong>的角度，来分享我们小组在这次培训中的实践经验。我们的团队被领导认为协作做得比较好，主要体现在三个方面：3天完成了一个高完成度、细节丰满的系统；每个组员包括计算机小白都亲手参与了AI编码；我们的协作方式得到了认可。接下来我会详细分享我们是怎么做到的。
</div>
</div>
<!-- ==================== SLIDE 2: SELF INTRODUCTION ==================== -->
<!-- ==================== SLIDE 3: PROJECT SHOWCASE ==================== -->
<div class="slide" data-slide="1" style="background: #0a0a0f;">
<div class="flex flex-col h-full">
<div class="slide-header">
<i class="material-icons glow-text mr-3" style="font-size:30px">code</i>
<h1 class="title-font font-bold text-3xl glow-text">上次小组协作项目成果</h1>
</div>
<div class="slide-body flex gap-8">
<div class="w-2/3 flex items-center justify-center">
<a href="https://github.com" target="_blank" class="relative group block w-full">
<img src="data:image/png;base64,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
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="background:rgba(21,133,122,0.12)">
<div class="text-center">
<i class="material-icons glow-accent" style="font-size:56px">open_in_new</i>
<p class="text-white font-semibold text-lg mt-2">点击查看项目</p>
</div>
</div>
</a>
</div>
<div class="w-1/3 flex flex-col justify-center gap-5">
<div class="card flex items-center gap-4">
<i class="material-icons glow-accent" style="font-size:36px">schedule</i>
<div><p class="text-sm" style="color:#999">开发周期</p><p class="code-font text-3xl font-bold glow-accent">3天</p></div>
</div>
<div class="card flex items-center gap-4">
<i class="material-icons glow-accent" style="font-size:36px">trending_up</i>
<div><p class="text-sm" style="color:#999">完成度</p><p class="code-font text-3xl font-bold glow-accent">95%</p></div>
</div>
<div class="card flex items-center gap-4">
<i class="material-icons glow-accent" style="font-size:36px">groups</i>
<div><p class="text-sm" style="color:#999">团队参与</p><p class="code-font text-3xl font-bold glow-accent">100%</p></div>
</div>
<div class="card-accent p-4 rounded-lg flex items-center gap-3">
<i class="material-icons glow-accent" style="font-size:24px">info</i>
<p class="text-sm" style="color:#d0d0d0">包括计算机小白在内的所有组员均亲手完成AI编码</p>
</div>
</div>
</div>
</div>
<div class="notes-text" style="display:none">
这就是我们上次小组协作完成的项目。大家可以点击图片链接查看实际效果。我想特别强调几个数字：<strong>3天</strong>的开发周期，<strong>95%</strong>的完成度，以及<strong>100%</strong>的团队参与度。3天时间我们完成了一个功能完整、细节丰满的系统，而且每个组员——包括之前完全没有编程经验的同事——都亲手参与了AI编码。这就是我们团队协作的成果，也是今天分享的出发点。接下来的内容，我会详细讲我们是如何做到的。
</div>
</div>
<!-- ==================== SLIDE 4: REQUIREMENT COLLABORATION ==================== -->
<div class="slide" data-slide="2" style="background: #0a0a0f;">
<div class="flex flex-col h-full">
<div class="slide-header">
<i class="material-icons glow-text mr-3" style="font-size:30px">psychology</i>
<h1 class="title-font font-bold text-3xl glow-text">需求协同 — 集思广益达成共识</h1>
</div>
<div class="slide-body flex gap-8">
<div class="w-2/5 flex items-center justify-center">
<a href="https://www.processon.com" target="_blank" class="block relative group">
<div class="p-3 rounded-xl" style="background:#ffffff;border:2px solid rgba(21,133,122,0.2)">
<img src="data:image/png;base64,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
</div>
<div class="absolute bottom-7 left-7 right-7 p-3 rounded-lg" style="background:rgba(10,10,15,0.85);border:1px solid rgba(21,133,122,0.2)">
<p class="text-sm font-medium glow-text">协同思维导图 — 点击查看</p>
<p class="text-xs mt-1" style="color:#888">实时协作 · 集思广益</p>
</div>
</a>
</div>
<div class="w-3/5 flex flex-col justify-center gap-5">
<div class="card flex items-start gap-4 p-5" style="border-left:4px solid #15857A">
<div class="code-font text-3xl font-bold glow-text flex-shrink-0">01</div>
<div class="flex-1">
<h3 class="text-lg font-semibold mb-1" style="color:#e8e8e8">协同思维导图贡献需求</h3>
<p class="text-sm" style="color:#999">使用在线思维导图工具，所有成员实时编辑，贡献系统功能和业务流的想法</p>
</div>
</div>
<div class="card flex items-start gap-4 p-5" style="border-left:4px solid #15857A">
<div class="code-font text-3xl font-bold glow-text flex-shrink-0">02</div>
<div class="flex-1">
<h3 class="text-lg font-semibold mb-1" style="color:#e8e8e8">集思广益覆盖功能与业务流</h3>
<p class="text-sm" style="color:#999">全方位收集系统功能需求，梳理完整业务流程，不遗漏关键场景</p>
</div>
</div>
<div class="card flex items-start gap-4 p-5" style="border-left:4px solid #15857A">
<div class="code-font text-3xl font-bold glow-text flex-shrink-0">03</div>
<div class="flex-1">
<h3 class="text-lg font-semibold mb-1" style="color:#e8e8e8">小组会议统一调整形成共识</h3>
<p class="text-sm" style="color:#999">召开小组会议讨论调整，确保需求得到全员一致性认可和明确</p>
</div>
</div>
<div class="card-accent p-4 rounded-lg flex items-center gap-3">
<i class="material-icons glow-accent" style="font-size:28px">lightbulb</i>
<div>
<p class="text-sm font-semibold glow-accent">实践意义</p>
<p class="text-sm mt-1" style="color:#d0d0d0">需求清晰统一，避免后期返工；全员参与需求定义，提升归属感与执行力</p>
</div>
</div>
</div>
</div>
</div>
<div class="notes-text" style="display:none">
我们协作的第一步是<strong>需求协同</strong>。明确选题后，我们采用了协同思维导图的方式来收集需求。大家可以看到左边这张思维导图，这是我们小组成员实时在线编辑的成果。每个成员都可以在导图上添加自己的功能想法和业务流程。集思广益之后，我们再通过小组会议统一调整，确保需求得到大家的一致性认可。这一步非常关键——如果需求不清晰、不统一，后面的开发就会频繁返工。而且让全员参与需求定义，大家对系统的理解更深入，执行时也更有归属感。这张思维导图是可以点击查看的，大家感兴趣的话可以看看我们当时是怎么梳理的。
</div>
</div>
<!-- ==================== SLIDE 5: TASK ALLOCATION ==================== -->
<div class="slide" data-slide="3" style="background: #0a0a0f;">
<div class="flex flex-col h-full">
<div class="slide-header">
<i class="material-icons glow-text mr-3" style="font-size:30px">assignment_turned_in</i>
<h1 class="title-font font-bold text-3xl glow-text">任务分配与规范约束</h1>
</div>
<div class="slide-body flex flex-col justify-center gap-5">
<div class="flex items-center justify-between gap-3">
<div class="flex-1 card p-5 text-center">
<div class="w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-3" style="background:rgba(21,133,122,0.15)">
<i class="material-icons glow-text" style="font-size:28px">account_tree</i>
</div>
<div class="code-font text-lg font-bold glow-text mb-1">Step 01</div>
<h3 class="text-base font-semibold" style="color:#e8e8e8">协同思维导图</h3>
<p class="text-sm mt-1" style="color:#888">明确功能与业务流</p>
</div>
<div class="flex items-center" style="color:rgba(21,133,122,0.4)"><i class="material-icons" style="font-size:28px">arrow_forward</i></div>
<div class="flex-1 card p-5 text-center">
<div class="w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-3" style="background:rgba(21,133,122,0.15)">
<i class="material-icons glow-text" style="font-size:28px">how_to_reg</i>
</div>
<div class="code-font text-lg font-bold glow-text mb-1">Step 02</div>
<h3 class="text-base font-semibold" style="color:#e8e8e8">每人认领模块</h3>
<p class="text-sm mt-1" style="color:#888">对照导图分配开发</p>
</div>
<div class="flex items-center" style="color:rgba(21,133,122,0.4)"><i class="material-icons" style="font-size:28px">arrow_forward</i></div>
<div class="flex-1 card p-5 text-center">
<div class="w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-3" style="background:rgba(21,133,122,0.15)">
<i class="material-icons glow-text" style="font-size:28px">construction</i>
</div>
<div class="code-font text-lg font-bold glow-text mb-1">Step 03</div>
<h3 class="text-base font-semibold" style="color:#e8e8e8">搭建脚手架</h3>
<p class="text-sm mt-1" style="color:#888">技术负责人搭建框架</p>
</div>
<div class="flex items-center" style="color:rgba(21,133,122,0.4)"><i class="material-icons" style="font-size:28px">arrow_forward</i></div>
<div class="flex-1 card p-5 text-center">
<div class="w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-3" style="background:rgba(21,133,122,0.15)">
<i class="material-icons glow-text" style="font-size:28px">rule</i>
</div>
<div class="code-font text-lg font-bold glow-text mb-1">Step 04</div>
<h3 class="text-base font-semibold" style="color:#e8e8e8">统一规范</h3>
<p class="text-sm mt-1" style="color:#888">同框架同规范协作</p>
</div>
</div>
<div class="flex gap-4">
<div class="flex-1 card flex items-start gap-3 p-4">
<i class="material-icons glow-text" style="font-size:26px">person_add</i>
<div>
<h3 class="text-base font-semibold" style="color:#e8e8e8">全员参与</h3>
<p class="text-sm mt-1" style="color:#999">包括计算机小白，每人对照需求思维导图认领独立模块，保证参与度和培训成效</p>
</div>
</div>
<div class="flex-1 card flex items-start gap-3 p-4">
<i class="material-icons glow-text" style="font-size:26px">source</i>
<div>
<h3 class="text-base font-semibold" style="color:#e8e8e8">GIT仓库</h3>
<p class="text-sm mt-1" style="color:#999">技术负责人搭建GIT仓库，集中式版本控制，高效协作无冲突</p>
</div>
</div>
<div class="flex-1 card flex items-start gap-3 p-4">
<i class="material-icons glow-text" style="font-size:26px">verified</i>
<div>
<h3 class="text-base font-semibold" style="color:#e8e8e8">规范约束</h3>
<p class="text-sm mt-1" style="color:#999">代码风格、命名约定、目录结构统一，降低协作摩擦成本</p>
</div>
</div>
</div>
<div class="card-accent p-4 rounded-lg flex items-center gap-4">
<i class="material-icons glow-accent" style="font-size:30px">lightbulb</i>
<div>
<p class="text-sm font-semibold glow-accent">实践意义</p>
<p class="text-sm mt-1" style="color:#d0d0d0">责任明确 → 参与充分 → 规范统一 → 零冲突协作。每个组员有明确的主人翁意识，技术负责人用架构和规范护航</p>
</div>
</div>
</div>
</div>
<div class="notes-text" style="display:none">
需求明确之后，就是<strong>任务分配</strong>。我们的做法是每个人对照需求思维导图，认领自己负责的功能模块。这样做的好处是，每个人都清楚自己要做什么，有明确的主人翁意识，同时也保证了全员参与——包括计算机小白也能找到适合自己上手的功能模块。然后技术负责人负责搭建项目脚手架和GIT仓库，约束好开发规范。这样所有组员都在同一套框架、同一个规范下协作开发，大大降低了协作的摩擦成本。总结来说就是：责任明确、参与充分、规范统一，最终实现零冲突协作。
</div>
</div>
<!-- ==================== SLIDE 6: AUTO-REGISTRATION ARCHITECTURE ==================== -->
<div class="slide" data-slide="4" style="background: #0a0a0f;">
<div class="flex flex-col h-full">
<div class="slide-header">
<i class="material-icons glow-text mr-3" style="font-size:30px">architecture</i>
<h1 class="title-font font-bold text-3xl glow-text">零冲突协作架构设计</h1>
</div>
<div class="slide-body flex gap-8">
<div class="w-3/5 flex flex-col justify-center gap-4">
<div class="p-5 rounded-lg" style="background:rgba(21,133,122,0.08);border:1px solid rgba(21,133,122,0.3)">
<div class="flex items-center gap-3 mb-3">
<i class="material-icons glow-text" style="font-size:28px">layers</i>
<h3 class="text-xl font-semibold glow-text">自动注册层</h3>
</div>
<div class="flex gap-3">
<div class="flex-1 p-3 rounded" style="background:rgba(21,133,122,0.1)">
<p class="text-base font-medium" style="color:#e8e8e8">API Router</p>
<p class="text-sm mt-1" style="color:#b0b0b0">自动扫描注册</p>
</div>
<div class="flex-1 p-3 rounded" style="background:rgba(21,133,122,0.1)">
<p class="text-base font-medium" style="color:#e8e8e8">Model</p>
<p class="text-sm mt-1" style="color:#b0b0b0">ORM模型自动导入</p>
</div>
<div class="flex-1 p-3 rounded" style="background:rgba(21,133,122,0.1)">
<p class="text-base font-medium" style="color:#e8e8e8">Service</p>
<p class="text-sm mt-1" style="color:#b0b0b0">业务逻辑自动收集</p>
</div>
</div>
</div>
<div class="p-5 rounded-lg" style="background:rgba(21,133,122,0.08);border:1px solid rgba(21,133,122,0.3)">
<div class="flex items-center gap-3 mb-3">
<i class="material-icons glow-text" style="font-size:28px">settings</i>
<h3 class="text-xl font-semibold glow-text">核心基础设施层 (core/)</h3>
</div>
<div class="grid grid-cols-3 gap-3">
<div class="p-2 rounded text-center" style="background:rgba(21,133,122,0.1)">
<p class="text-sm font-medium" style="color:#e8e8e8">config.py</p>
<p class="text-xs mt-1" style="color:#b0b0b0">配置管理</p>
</div>
<div class="p-2 rounded text-center" style="background:rgba(21,133,122,0.1)">
<p class="text-sm font-medium" style="color:#e8e8e8">database.py</p>
<p class="text-xs mt-1" style="color:#b0b0b0">数据库连接</p>
</div>
<div class="p-2 rounded text-center" style="background:rgba(21,133,122,0.1)">
<p class="text-sm font-medium" style="color:#e8e8e8">security.py</p>
<p class="text-xs mt-1" style="color:#b0b0b0">安全认证</p>
</div>
<div class="p-2 rounded text-center" style="background:rgba(21,133,122,0.1)">
<p class="text-sm font-medium" style="color:#e8e8e8">cache.py</p>
<p class="text-xs mt-1" style="color:#b0b0b0">缓存服务</p>
</div>
<div class="p-2 rounded text-center" style="background:rgba(21,133,122,0.1)">
<p class="text-sm font-medium" style="color:#e8e8e8">middleware.py</p>
<p class="text-xs mt-1" style="color:#b0b0b0">中间件</p>
</div>
<div class="p-2 rounded text-center" style="background:rgba(21,133,122,0.1)">
<p class="text-sm font-medium" style="color:#e8e8e8">deps.py</p>
<p class="text-xs mt-1" style="color:#b0b0b0">依赖注入</p>
</div>
</div>
</div>
<div class="p-5 rounded-lg" style="background:rgba(21,133,122,0.08);border:1px solid rgba(21,133,122,0.3)">
<div class="flex items-center gap-3 mb-3">
<i class="material-icons glow-text" style="font-size:28px">web</i>
<h3 class="text-xl font-semibold glow-text">前端分层架构</h3>
</div>
<div class="flex gap-3">
<div class="flex-1 p-2 rounded" style="background:rgba(21,133,122,0.1)">
<p class="text-sm font-medium" style="color:#e8e8e8">router/</p>
<p class="text-xs" style="color:#b0b0b0">路由自动扫描</p>
</div>
<div class="flex-1 p-2 rounded" style="background:rgba(21,133,122,0.1)">
<p class="text-sm font-medium" style="color:#e8e8e8">views/</p>
<p class="text-xs" style="color:#b0b0b0">页面组件隔离</p>
</div>
<div class="flex-1 p-2 rounded" style="background:rgba(21,133,122,0.1)">
<p class="text-sm font-medium" style="color:#e8e8e8">api/</p>
<p class="text-xs" style="color:#b0b0b0">API请求层</p>
</div>
<div class="flex-1 p-2 rounded" style="background:rgba(21,133,122,0.1)">
<p class="text-sm font-medium" style="color:#e8e8e8">store/</p>
<p class="text-xs" style="color:#b0b0b0">状态管理</p>
</div>
</div>
</div>
</div>
<div class="w-2/5 flex flex-col justify-center gap-5">
<div class="p-5 rounded-lg" style="background:rgba(255,106,59,0.08);border:2px solid rgba(255,106,59,0.3)">
<div class="flex items-center gap-2 mb-4">
<i class="material-icons glow-accent" style="font-size:32px">rule</i>
<h3 class="text-xl font-semibold glow-accent">核心原则</h3>
</div>
<div class="space-y-3">
<div class="flex items-start gap-3">
<div class="w-2 h-2 rounded-full mt-2 flex-shrink-0" style="background:#FF6A3B"></div>
<p class="text-base" style="color:#d0d0d0">每人只在<span class="font-semibold" style="color:#e8e8e8">独立模块文件</span>工作</p>
</div>
<div class="flex items-start gap-3">
<div class="w-2 h-2 rounded-full mt-2 flex-shrink-0" style="background:#FF6A3B"></div>
<p class="text-base" style="color:#d0d0d0">自动扫描注册机制</p>
</div>
<div class="flex items-start gap-3">
<div class="w-2 h-2 rounded-full mt-2 flex-shrink-0" style="background:#FF6A3B"></div>
<p class="text-base" style="color:#d0d0d0">依赖注入解耦</p>
</div>
</div>
</div>
<div class="p-5 rounded-lg" style="background:rgba(21,133,122,0.08);border:1px solid rgba(21,133,122,0.3)">
<div class="flex items-center gap-2 mb-4">
<i class="material-icons glow-text" style="font-size:32px">verified_user</i>
<h3 class="text-xl font-semibold glow-text">模块自治</h3>
</div>
<div class="space-y-3">
<div class="flex items-center gap-2 p-2 rounded" style="background:rgba(21,133,122,0.1)">
<i class="material-icons" style="font-size:20px;color:#15857A">folder</i>
<p class="text-base" style="color:#e8e8e8">文件物理隔离</p>
</div>
<div class="flex items-center gap-2 p-2 rounded" style="background:rgba(21,133,122,0.1)">
<i class="material-icons" style="font-size:20px;color:#15857A">table_chart</i>
<p class="text-base" style="color:#e8e8e8">数据库表隔离</p>
</div>
<div class="flex items-center gap-2 p-2 rounded" style="background:rgba(21,133,122,0.1)">
<i class="material-icons" style="font-size:20px;color:#15857A">code</i>
<p class="text-base" style="color:#e8e8e8">命名空间隔离</p>
</div>
</div>
</div>
<div class="p-4 rounded-lg flex items-center gap-3" style="background:rgba(255,106,59,0.08);border:1px solid rgba(255,106,59,0.3)">
<i class="material-icons glow-accent" style="font-size:28px">lightbulb</i>
<div>
<p class="text-sm font-medium glow-accent">协作价值</p>
<p class="text-base mt-1" style="color:#d0d0d0">零冲突协作，大幅降低协作成本</p>
</div>
</div>
</div>
</div>
</div>
<div class="notes-text" style="display:none">
这是我们技术管理中最核心的设计——<strong>自动注册架构</strong>。我从架构师的角度来解读一下：自动注册本质上是"开闭原则"的工程化实现——对扩展开放，对修改关闭。新增模块只需创建独立文件，注册文件会自动扫描并加载，不需要修改任何已有代码。依赖注入机制实现了业务与基础设施的契约式解耦，模块自治则是高内聚低耦合的极致形态。这套架构对协作开发的意义是决定性的：每人只操作自己的文件，从物理层面杜绝代码冲突；新增功能无需改旧代码，即使是小白也能安全地添加模块；注册文件标记为"禁止修改"，从制度上消除了协作瓶颈。即使N个模块并行开发，合并时零冲突。这就是我们3天能完成系统的技术保障。
</div>
</div>
<!-- ==================== SLIDE 7: PROMPT ENGINEERING ==================== -->
<div class="slide" data-slide="5" style="background: #0a0a0f;">
<div class="flex flex-col h-full">
<div class="slide-header">
<i class="material-icons glow-text mr-3" style="font-size:30px">description</i>
<h1 class="title-font font-bold text-3xl glow-text">开发规范与提示词工程</h1>
</div>
<div class="slide-body flex gap-6 items-center">
<div class="w-2/5 flex flex-col justify-center gap-4">
<div class="card p-5" style="border-color:rgba(21,133,122,0.3)">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2 glow-text">
<i class="material-icons" style="font-size:22px">verified</i>提示词审核流程
</h3>
<div class="space-y-2">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0" style="background:rgba(21,133,122,0.15)"><span class="code-font text-base font-bold glow-text">1</span></div>
<div class="flex-1 p-2.5 rounded" style="background:rgba(21,133,122,0.08)"><p class="text-sm font-medium" style="color:#e8e8e8">组员编写提示词</p><p class="text-xs" style="color:#888">基于脚手架规范撰写</p></div>
</div>
<div class="flex justify-center"><i class="material-icons glow-text" style="font-size:22px">arrow_downward</i></div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0" style="background:rgba(255,106,59,0.15)"><span class="code-font text-base font-bold glow-accent">2</span></div>
<div class="flex-1 p-2.5 rounded" style="background:rgba(255,106,59,0.08)"><p class="text-sm font-medium glow-accent">技术负责人审核修改</p><p class="text-xs" style="color:#888">质量把控与优化</p></div>
</div>
<div class="flex justify-center"><i class="material-icons glow-text" style="font-size:22px">arrow_downward</i></div>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0" style="background:rgba(21,133,122,0.15)"><span class="code-font text-base font-bold glow-text">3</span></div>
<div class="flex-1 p-2.5 rounded" style="background:rgba(21,133,122,0.08)"><p class="text-sm font-medium" style="color:#e8e8e8">返回组员使用</p><p class="text-xs" style="color:#888">一轮对话生成可交付代码</p></div>
</div>
</div>
</div>
<div class="card-accent p-4 rounded-lg flex items-center gap-3">
<i class="material-icons glow-accent" style="font-size:24px">lightbulb</i>
<div>
<p class="text-sm font-semibold glow-accent">实践意义</p>
<p class="text-sm mt-1" style="color:#d0d0d0">审核机制保证提示词质量 → 一轮对话生成可交付级代码</p>
</div>
</div>
</div>
<div class="w-3/5 flex flex-col gap-4">
<div class="card p-4" style="border-left:4px solid #15857A">
<div class="flex items-start gap-3">
<i class="material-icons glow-text" style="font-size:26px">code</i>
<div class="flex-1">
<p class="text-base font-semibold mb-1" style="color:#e8e8e8">统一代码开发规范提示词</p>
<p class="text-sm" style="color:#999">提供项目级别的开发规范提示词模板，所有组员在AI编码时附上该提示词，确保编码风格、命名约定、目录结构的一致性</p>
</div>
</div>
</div>
<div class="card p-4" style="border-left:4px solid #15857A">
<div class="flex items-start gap-3">
<i class="material-icons glow-text" style="font-size:26px">stars</i>
<div class="flex-1">
<p class="text-base font-semibold mb-1" style="color:#e8e8e8">高质量提示词样例</p>
<p class="text-sm" style="color:#999">针对功能模块开发，提供一个高质量提示词样例供组员模仿。包含：上下文描述、技术约束、输入输出定义、边界条件等关键要素</p>
</div>
</div>
</div>
<div class="card p-4" style="border-left:4px solid #15857A">
<div class="flex items-start gap-3">
<i class="material-icons glow-text" style="font-size:26px">fact_check</i>
<div class="flex-1">
<p class="text-base font-semibold mb-1" style="color:#e8e8e8">提示词审核机制</p>
<p class="text-sm" style="color:#999">组员写好的提示词先发给技术负责人修改审核，再发回组员使用。确保提示词的准确性、完整性和可执行性</p>
</div>
</div>
</div>
<div class="card p-4" style="border-left:4px solid #FF6A3B">
<div class="flex items-start gap-3">
<i class="material-icons glow-accent" style="font-size:26px">auto_stories</i>
<div class="flex-1">
<p class="text-base font-semibold mb-1" style="color:#e8e8e8">傻瓜式Git操作文档</p>
<p class="text-sm" style="color:#999">提供一份简明的Git操作指南，讲清Git的作用和基础使用方法，让零基础的组员也能顺利参与版本控制</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="notes-text" style="display:none">
在技术管理方面，我们做了四件事。第一是<strong>统一开发规范提示词</strong>——我们提供了一套项目级别的提示词模板，所有组员在用AI编码时都要附上，确保代码风格和命名约定一致。第二是<strong>高质量提示词样例</strong>——我们提供了一个针对功能模块开发的示范提示词，包含上下文描述、技术约束、输入输出定义等关键要素，让组员有模板可模仿。第三是<strong>提示词审核机制</strong>——组员写好的提示词不是直接用，而是先发给技术负责人审核修改，确认没问题了再发回去用。这样就保证了一轮对话就能生成可交付级别的代码。第四是<strong>傻瓜式Git操作文档</strong>，让零基础的同事也能顺利使用版本控制。
</div>
</div>
<!-- ==================== SLIDE 8: GIT ==================== -->
<div class="slide" data-slide="6" style="background: #0a0a0f;">
<div class="flex flex-col h-full">
<div class="slide-header">
<i class="material-icons glow-text mr-3" style="font-size:30px">source</i>
<h1 class="title-font font-bold text-3xl glow-text">Git版本控制与团队协作</h1>
</div>
<div class="slide-body flex gap-6">
<div class="w-2/5 flex items-center justify-center">
<div class="relative w-full rounded-xl" style="border:2px solid rgba(21,133,122,0.2);background:rgba(255,255,255,0.12);padding:8px">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB6oAAAUECAYAAABlY544AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAP+lSURBVHhe7N13dBRVG8fxbxJCqKEZ6UW6IkgXRJqIIIIiKtIURJAq1YICLyJFFBFUeu8gKqIgHSkqvYmi9BZ6BCG0hITk/WNmN7uT3WQ3pMLvc86ck8y9O9nszs7szHOf5/qE346IRkREREREREREREREREREJJn4WleIiIiIiIiIiIiIiIiIiIgkJQWqRUREREREREREREREREQkWSlQLSIiIiIiIiIiIiIiIiIiyUqBahERERERERERERERERERSVYKVIuIiIiIiIiIiIiIiIiISLJSoFpERERERERERERERERERJKVAtUiIiIiIiIiIiIiIiIiIpKsFKgWEREREREREREREREREZFkpUC1iIiIiIiIiIiIiIiIiIgkKwWqRUREREREREREREREREQkWfmE346Itq4UERERERERERERkZR3LfQ6N2/dIiIikujoe/tWro+PD/7+6ciUMSNZA7NYm71yP71ukjYl5v6O9nlxITH3sfCw20RERBAZdQe0e4mND6Tz9cPf35+ADOmtrR5RoFpEREREREREREQklYmMvMOlS5fx8/Uja2BW0qXzw9f33i6QGRUVRWTkHa6FXuNO1B1y5cpJunR+1m5xuh9fN0lap0+fpUCBfNbVdy0x9ne0z6dJSbVPWSXGPnbnThS3bt7Cx9eHgIAAfP188fHxsXaTVObqlVCyZQ+0rk500dHRRN2JIjw8nOioaDJmyoifn3fHH+96i4iIiIiIiIiIiEiSu3TpMgEBGcj1QE7Sp/e/LwJPvr6+pE/vb/7PAVy6dNnaJV734+smaVNi7O9on5c4JMY+duvmLfzSpSNT5kz4pfNTkFqc+Pj44JfOj0yZM+Gbzo9bN29Zu8RLRywRERERERERERGRVORa6HV8fHzIli2rtem+kT17IL4+vlwLvW5tckuvm6RVCdnf0T4vXkjIPhYedht8IEPGAGuTSCwZM2YAH3O/8UKqLf2978+/mDlrDjt37uTkqWBr81158skn+HrMaHLmzGFtEhEREREREREREUlRFy6EEBgYSIYM93dwICwsnNDQUHLnDrI2uaTXTZJCcpVp9nZ/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
<div class="absolute inset-0 flex items-center justify-center" style="background:rgba(10,10,15,0.15)">
<div class="text-center">
<i class="material-icons glow-text" style="font-size:48px">account_tree</i>
<p class="text-base font-semibold mt-2 glow-text">Git协作工作流</p>
</div>
</div>
</div>
</div>
<div class="w-3/5 flex flex-col justify-center gap-4">
<div class="grid grid-cols-2 gap-3">
<div class="card p-4">
<div class="flex items-center gap-2 mb-2">
<i class="material-icons glow-text" style="font-size:22px">info</i>
<h3 class="text-base font-semibold" style="color:#e8e8e8">什么是Git</h3>
</div>
<p class="text-sm" style="color:#999">分布式版本控制系统，记录代码的每次变更，支持多人并行开发</p>
</div>
<div class="card p-4">
<div class="flex items-center gap-2 mb-2">
<i class="material-icons glow-text" style="font-size:22px">sync</i>
<h3 class="text-base font-semibold" style="color:#e8e8e8">基础操作</h3>
</div>
<p class="text-sm code-font" style="color:#999">pull → branch → commit → push → merge</p>
</div>
</div>
<div class="card p-4" style="border-color:rgba(21,133,122,0.3)">
<h3 class="text-base font-semibold mb-2 flex items-center gap-2 glow-text">
<i class="material-icons" style="font-size:20px">folder</i>Git仓库地址
</h3>
<div class="space-y-2">
<a href="https://github.com/your-org/project-frontend" target="_blank" class="flex items-center gap-2 p-2.5 rounded" style="background:rgba(21,133,122,0.08)">
<i class="material-icons" style="font-size:18px;color:#15857A">link</i>
<p class="text-sm code-font" style="color:#e8e8e8">http://XX.72.101.113:8888/users/sign_in</p>
</a>
<a href="https://github.com/your-org/project-backend" target="_blank" class="flex items-center gap-2 p-2.5 rounded" style="background:rgba(21,133,122,0.08)">
<i class="material-icons" style="font-size:18px;color:#15857A">link</i>
<p class="text-sm code-font" style="color:#e8e8e8">https://111.229.199.210</p>
</a>
</div>
</div>
<div class="card p-4">
<div class="flex items-center gap-2 mb-2">
<i class="material-icons glow-text" style="font-size:22px">description</i>
<h3 class="text-base font-semibold" style="color:#e8e8e8">傻瓜式操作文档</h3>
</div>
<p class="text-sm" style="color:#999">详细步骤说明，新手友好。从克隆仓库到提交代码，每一步都有截图和说明，零基础也能快速上手</p>
</div>
<div class="card-accent p-4 rounded-lg flex items-center gap-3">
<i class="material-icons glow-accent" style="font-size:24px">lightbulb</i>
<div>
<p class="text-sm font-semibold glow-accent">协作价值</p>
<p class="text-sm mt-1" style="color:#d0d0d0">Git让团队并行开发、版本可追溯、变更可回滚，是多人协作的必备基础设施</p>
</div>
</div>
</div>
</div>
</div>
<div class="notes-text" style="display:none">
关于Git，我简单介绍一下。Git是一个分布式版本控制系统，它能记录代码的每次变更，支持多人并行开发。基本的操作流程就是：先pull拉取最新代码，然后创建自己的分支开发，完成后commit提交，再push推送到远程，最后merge合并。我们的项目有前端和后端两个仓库，地址都在PPT上，可以点击访问。我们还提供了一份傻瓜式的Git操作文档，从克隆仓库到提交代码，每一步都有详细说明，零基础也能快速上手。Git的价值在于：让团队能够并行开发、版本可追溯、变更可回滚，是多人协作的必备基础设施。配合我们前面的模块自治架构，即使大家同时往仓库推代码，也很少产生冲突。
</div>
</div>
<!-- ==================== SLIDE 9: SUMMARY ==================== -->
<div class="slide" data-slide="7" style="background: #0a0a0f;">
<div class="flex flex-col h-full">
<div class="slide-header">
<i class="material-icons glow-text mr-3" style="font-size:30px">check_circle</i>
<h1 class="title-font font-bold text-3xl glow-text">核心要点总结</h1>
</div>
<div class="slide-body flex flex-col justify-center gap-5">
<div class="grid grid-cols-4 gap-4">
<div class="card p-5 flex flex-col items-center text-center">
<i class="material-icons glow-text mb-2" style="font-size:36px">account_tree</i>
<h3 class="text-lg font-semibold glow-text mb-1">协同导图</h3>
<p class="text-xs" style="color:#888">集思广益</p>
</div>
<div class="card p-5 flex flex-col items-center text-center">
<i class="material-icons glow-text mb-2" style="font-size:36px">assignment_ind</i>
<h3 class="text-lg font-semibold glow-text mb-1">认领分工</h3>
<p class="text-xs" style="color:#888">全员参与</p>
</div>
<div class="card p-5 flex flex-col items-center text-center">
<i class="material-icons glow-text mb-2" style="font-size:36px">autorenew</i>
<h3 class="text-lg font-semibold glow-text mb-1">零冲突架构</h3>
<p class="text-xs" style="color:#888">自动注册机制</p>
</div>
<div class="card p-5 flex flex-col items-center text-center">
<i class="material-icons glow-text mb-2" style="font-size:36px">rule</i>
<h3 class="text-lg font-semibold glow-text mb-1">规范约束</h3>
<p class="text-xs" style="color:#888">统一标准</p>
</div>
</div>
<div class="grid grid-cols-4 gap-4">
<div class="card p-5 flex flex-col items-center text-center">
<i class="material-icons glow-text mb-2" style="font-size:36px">psychology</i>
<h3 class="text-lg font-semibold glow-text mb-1">提示词工程</h3>
<p class="text-xs" style="color:#888">模板样例+审核</p>
</div>
<div class="card p-5 flex flex-col items-center text-center">
<i class="material-icons glow-text mb-2" style="font-size:36px">source</i>
<h3 class="text-lg font-semibold glow-text mb-1">Git协作</h3>
<p class="text-xs" style="color:#888">版本可控</p>
</div>
<div class="card p-5 flex flex-col items-center text-center">
<i class="material-icons glow-text mb-2" style="font-size:36px">verified</i>
<h3 class="text-lg font-semibold glow-text mb-1">模块自治</h3>
<p class="text-xs" style="color:#888">低耦合</p>
</div>
<div class="card-accent p-5 flex flex-col items-center text-center">
<i class="material-icons glow-accent mb-2" style="font-size:36px">rocket_launch</i>
<h3 class="text-lg font-semibold glow-accent mb-1">高效交付</h3>
<p class="text-xs" style="color:#888">3天完成</p>
</div>
</div>
<div class="card-accent p-5 rounded-xl flex items-center justify-center gap-4 mt-2">
<i class="material-icons glow-accent" style="font-size:32px">emoji_objects</i>
<p class="text-lg" style="color:#d0d0d0">
<span class="glow-text font-semibold">协同导图</span> +
<span class="glow-text font-semibold">认领分工</span> +
<span class="glow-text font-semibold">自动注册</span> +
<span class="glow-text font-semibold">规范约束</span> +
<span class="glow-text font-semibold">提示词工程</span> +
<span class="glow-text font-semibold">Git协作</span> =
<span class="glow-accent font-bold">高效AI开发</span>
</p>
</div>
</div>
</div>
<div class="notes-text" style="display:none">
最后做一下总结。我们这次培训小组协作能取得好成绩，核心要点可以浓缩为八个词：<strong>协同导图</strong>——用思维导图集思广益；<strong>认领分工</strong>——让全员都有参与感；<strong>自动注册</strong>——零冲突架构设计；<strong>规范约束</strong>——统一标准保证质量；<strong>提示词工程</strong>——审核即质量；<strong>Git协作</strong>——版本可控可追溯；<strong>模块自治</strong>——低耦合高内聚；<strong>高效交付</strong>——3天完成系统开发。这些做法不是孤立的，而是一套完整的协作体系：从需求到分工，从架构到规范，从提示词到版本控制，环环相扣，最终实现了高效AI开发。
</div>
</div>
<!-- ==================== SLIDE 10: THANK YOU ==================== -->
<div class="slide" data-slide="8" style="background: #0a0a0f;">
<div class="absolute inset-0 opacity-5">
<div class="absolute top-16 left-16 w-96 h-96 rounded-full" style="background:radial-gradient(circle,rgba(21,133,122,0.3) 0%,transparent 70%)"></div>
<div class="absolute bottom-16 right-16 w-80 h-80 rounded-full" style="background:radial-gradient(circle,rgba(255,106,59,0.2) 0%,transparent 70%)"></div>
</div>
<div class="relative z-10 flex flex-col justify-center items-center h-full">
<div class="mb-6">
<i class="material-icons glow-text-strong" style="font-size:72px">favorite</i>
</div>
<h1 class="title-font font-black text-6xl glow-text-strong mb-6">感谢聆听</h1>
<div class="w-64 h-0.5 mx-auto mb-6" style="background:linear-gradient(90deg,transparent,#15857A,#20c9b0,#15857A,transparent)"></div>
<p class="text-2xl font-medium mb-8" style="color:#d0d0d0">欢迎交流探讨</p>
<div class="flex gap-5 mb-8">
<div class="card flex items-center gap-3 p-4">
<i class="material-icons glow-text" style="font-size:28px">phone</i>
<p class="text-base" style="color:#e8e8e8">139-1357-9181</p>
</div>
<div class="card flex items-center gap-3 p-4">
<i class="material-icons glow-text" style="font-size:28px">forum</i>
<p class="text-base" style="color:#e8e8e8">期待您的反馈</p>
</div>
</div>
<div class="flex gap-6 items-center">
<div class="flex items-center gap-2"><i class="material-icons glow-accent" style="font-size:24px">emoji_objects</i><p class="text-sm" style="color:#999">持续学习</p></div>
<div class="flex items-center gap-2"><i class="material-icons glow-accent" style="font-size:24px">trending_up</i><p class="text-sm" style="color:#999">共同进步</p></div>
<div class="flex items-center gap-2"><i class="material-icons glow-accent" style="font-size:24px">groups</i><p class="text-sm" style="color:#999">携手前行</p></div>
</div>
</div>
<div class="absolute bottom-6 left-0 right-0 text-center">
<p class="text-xs" style="color:#555">AI+OPC培训团队协作经验分享 © 2026</p>
</div>
<div class="notes-text" style="display:none">
今天的分享就到这里。总结来说，AI+OPC培训给我们最大的启示是：<strong>好的协作方式比个人能力更重要</strong>。通过协同导图明确需求、认领分工确保参与、自动注册架构零冲突、规范约束保质量、提示词审核提效率、Git协作可追溯，我们用3天时间就交付了一个高质量的完整系统。希望这些经验对大家有所启发。如果大家有任何问题或者想进一步交流，欢迎随时联系我。谢谢大家！
</div>
</div>
</div><!-- end slide-viewport -->
</div><!-- end presentation-container -->
<!-- Review image overlay (between Slide 6 and Slide 7) -->
<div class="review-overlay" id="reviewOverlay">
<div class="relative" style="max-width:80vw;max-height:80vh;">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQICAQEBAQMCAgICAwMEBAMDAwMEBAYFBAQFBAMDBQcFBQYGBgYGBAUHBwcGBwYGBgb/2wBDAQEBAQEBAQMCAgMGBAMEBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgb/wAARCAjEBDgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+IeiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACikyCSM8jqKWgAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooowT0BNABRRRQAUUpBBwRg0lABRRRQAUUUUAFFHcDuc4FFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABX17+xP8AsT/Gv9u7416P8HPg5o+VO258c+OdRiI0rw3pQP7y8vJOB0DBIgd8r4VR95lg/Yr/AGMvi9+3R8b9C+CnwjsYo551F5408Yakv/Eu8O6IjBbjULoggsqFkVY1+aR2VRgnNf1m/tK/tK/swf8ABBv9mDT/ANln9lnT9I8ZftR+MtIW7v7/AFaNJrtruRNp8QeICvO3IP2azyAwUABY1ZiAfll/wWR/Zd/4JyfsWfBT4Ifs1fB/+2db/bE8IGO68XeLdN1FHmu9Kul33Fx4kXBVZZn2taW8YV4ouWxGU87+cmu4+IHxA8a/FXxr4n+I/wAR/E+r+MvHPjLV5b/xP4n167M11eXUhyzux/ABRhVUBVAUADj6AK9FFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAfpz8Mv+CN3/BSH4xfD3wX8Vfhx+zl/wkXgL4heG7TV/B+vf8Le8L2f2zTrmMSQS+RPqiSx7kYHbIisM8gGu5/4cS/8FVv+jWP/ADN/hD/5cVV+A/8AwV0/4KseGfDfw1/Zz/Z++Nmu3+m+H9KstB+Gfw78MfAbw3rmpPb28Kx29tDv0mW4uGWOIDLM7ELyeK/rH/ZF8Q/t2fs9/BjxJ+1R/wAFe/2wdH8L+ErLQRPp3webwF4Y06DS0kyEbUr3T9OSe41CQlFhsbNyd5VW815PKjAPj39kv/gkbqnhz/glX8f/AIbfHD9jz4Q337bOq+HvHf8AwrG/1/SPDOs+Io7m4sdujfZteSSRLZvPUeWTcqIWO4lM8fgl/wAOIf8Agqx/0alJ/wCHv8If/Liv7Bfg1/wUdm+Nf7Bv7UX7dHgnwJbQeHfhDJ47m+HHhHWbl47nUdP0GwSe2OosGIjluJPM3CM7Ygyplypdqd/8ePiz/wAFH/2PNP8Ajr/wTF/aeHwa+LOixP8A2v8ADzxT4N0PVYm1VUBm0XWFvrG4ks5hgmK5h/dOpD7ZInWRAD+Qb/hxD/wVY/6NSk/8Pf4Q/wDlxX5k6H8O7i7+K2k/Cnxjr/h/4b3c/j+Hw/4n8T+LL3Ol6FKbsW9xc3k0If8AcQNvZ3j3DahIyK/ZX42/8Fbv+C3H7N/jfUfhx8dfi/4k+GfjXTeZNF8Q/AfwgBNF0862nXSDFcQkhgJYXeMlSA2Qa/D7X9f1XxXruteKddu/t+t+JNWudQ1m+8hIvOuriRpJpNiAKu53Y4UBRnAAHFAH7k/HX/gkt4l/YH/bo/YR8K+M9W0P45/A342/HPwDZHxbqfhIRaNe3Z1azj1bStQtXeVBG6yO6pIxE1vIR8xjlx9If8FO/wBgTwd8XP8Agr7+zv8Asi/s1fDLwH8HfCnxE+Dvh668W2/wu8HWmi6ZpmnjUtTbU9Xa2t4UiaVbW3wGbb5jpBHnLZr6J/4JL/tmfEX9ub4bfs7fsMeOfgxf/FHV/wBnL4w+HPFmvftFa9cObDwx4T8N3cd9oju0ciySam9xbnTUGUVrYlpPOBuAP13/AGpZPH37Jnxo+PH7f/g79nu5/acv9R/ZytvCOkv8P7pZNZ8ISaNNeXJjurYjdPpN3dyxtcTWzNPbtapm3ZQ0sYB/Mv8At1f8EA/jB+zP4P8Aip8Yvgp8SdL+Ovwp+GUVtda7pb6ctp4msLUl21DzYYZJI5fsUZtJJHBjZ0mZxEoT5/dPHX7L/wCzvon/AAbo+Ev2iU+Cvw7t/jjefZRqnxVTwrCviBnHjqW2JN7t83PkBYuTwiKoxivnb/glJ/wVH+PHwt/bA8cWHjzRPiB+0R4W/a/8dXd18SPhz4S05tS1a48S3DkjUtNtSCN+xfKkiBSL7OvJQQxlf6hP2mf2Frn4o/8ABPHTP2Ufh38NdA8D6HN4w0LxB4i+BXh3xx9ktrfT49eGsanoGl6o0LIsm55beCZ0SEFVyI0I2gH8dvwy/wCCTPj/AMef8E8PiT/wUH8S/FHw38J/CPg2LULzwl4O8d6JKjeJdLtiI0lt7tJCY5bi6EltBGYnEsm3LxowevyTr+iH/guP+3hqHjbUPAv7Bnwq+F/jv9nv4GfAXR9KOufD3xj4ZGhX19qMVqI7a3NsrMPsFmm6OIo7RTurSqZUWCU/zvUAFfpx4f8A+CNH/BTTxdoOi+KvC37K+u6z4a8SaVBfaBqyfEHQY1ubOdA8MoVr/IDIytg4PNfmPX90H/BVP9tL9pH9iT9gz9gHxV+zT8RV+G2seMfDejWXifUB4N0vV2ntovD0bxoFv7WdEwzMcooJ7k4FAH8j37Sf7Av7YH7H3hvw/wCLf2lPgtqPwu0DxXrTaf4cv77xRpt+Lq7VN7xhbW5kZcIM5YAe9f0E3X7I/wCzP+zD/wAECofjj8avgV8NvEH7RPxM8Hve+D
<div class="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer z-10 flex items-center justify-center w-12 h-12 rounded-full" style="background:rgba(21,133,122,0.2);backdrop-filter:blur(4px);" onclick="nextSlide()">
<i class="material-icons glow-text" style="font-size:32px">chevron_right</i>
</div>
</div>
<div class="hint cursor-pointer" onclick="nextSlide()">
<i class="material-icons" style="font-size:18px">chevron_right</i>
点击继续翻页进入下一节
<i class="material-icons" style="font-size:18px">chevron_right</i>
</div>
</div>
<!-- Navigation buttons -->
<button class="nav-btn prev" id="prevBtn" onclick="prevSlide()">
<i class="material-icons">chevron_left</i>
</button>
<button class="nav-btn next" id="nextBtn" onclick="nextSlide()">
<i class="material-icons">chevron_right</i>
</button>
<!-- Slide counter -->
<div class="slide-counter" id="slideCounter">1 / 10</div>
<!-- Timer -->
<div class="timer-display" id="timerDisplay">0分0秒</div>
<script>
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let currentSlide = 0;
let reviewImageActive = false;
const reviewOverlay = document.getElementById('reviewOverlay');
function showOverlay() {
reviewImageActive = true;
reviewOverlay.classList.add('active');
}
function hideOverlay() {
reviewImageActive = false;
reviewOverlay.classList.remove('active');
}
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === index);
});
document.getElementById('slideCounter').textContent = `${index + 1} / ${totalSlides}`;
document.getElementById('progressBar').style.width = `${((index + 1) / totalSlides) * 100}%`;
document.getElementById('prevBtn').disabled = index === 0;
document.getElementById('nextBtn').disabled = index === totalSlides - 1;
}
function nextSlide() {
// From Slide 6 (index 5): first show overlay, then go to Slide 7
if (currentSlide === 5 && !reviewImageActive) {
showOverlay();
return;
}
// When overlay active, hide it and advance
if (reviewImageActive) {
hideOverlay();
currentSlide = 6;
showSlide(currentSlide);
return;
}
// Normal next
if (currentSlide < totalSlides - 1) {
currentSlide++;
showSlide(currentSlide);
}
}
function prevSlide() {
// From Slide 7 (index 6): go back through overlay
if (currentSlide === 6 && !reviewImageActive) {
showOverlay();
currentSlide = 5;
showSlide(currentSlide);
return;
}
// When overlay active, hide it and go back
if (reviewImageActive) {
hideOverlay();
return;
}
// Normal prev
if (currentSlide > 0) {
currentSlide--;
showSlide(currentSlide);
}
}
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') {
e.preventDefault();
nextSlide();
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
prevSlide();
}
});
// Timer
let timerSeconds = 0;
const timerEl = document.getElementById('timerDisplay');
function updateTimer() {
timerSeconds++;
const m = Math.floor(timerSeconds / 60);
const s = timerSeconds % 60;
timerEl.textContent = `${m}分${s}秒`;
}
setInterval(updateTimer, 1000);
// Initialize
showSlide(0);
</script>
</body>
</html>
Reference in New Issue Copy Permalink