✨ feat(file-check): 忽略无效扫码结果并完善汇报材料
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#f4f7fb" />
|
||||
<title>3 个月，我从写 if-else 到 Vibe Coding</title>
|
||||
<title>从初学者需求到完整项目计划 · AxiOmron PCBCheck</title>
|
||||
<style>
|
||||
:root {
|
||||
--ink: #10233f;
|
||||
@@ -765,6 +765,248 @@
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.requirement-layout,
|
||||
.question-layout,
|
||||
.contract-layout,
|
||||
.plan-layout,
|
||||
.phase-layout {
|
||||
display: grid;
|
||||
gap: clamp(24px, 4vw, 60px);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.requirement-layout { grid-template-columns: .72fr 1.28fr; }
|
||||
.question-layout { grid-template-columns: .72fr 1.28fr; }
|
||||
.contract-layout,
|
||||
.plan-layout,
|
||||
.phase-layout { grid-template-columns: 1fr; }
|
||||
|
||||
.requirement-intro,
|
||||
.question-intro {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.quote-card {
|
||||
margin-top: 24px;
|
||||
padding: 22px 24px;
|
||||
border-left: 5px solid var(--orange);
|
||||
border-radius: 0 16px 16px 0;
|
||||
color: var(--ink);
|
||||
background: var(--orange-soft);
|
||||
box-shadow: 0 10px 28px rgba(216, 107, 24, .08);
|
||||
font-size: clamp(17px, 1.25vw, 20px);
|
||||
font-weight: 700;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.small-note {
|
||||
margin: 18px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.requirement-grid,
|
||||
.question-grid,
|
||||
.contract-grid,
|
||||
.plan-grid,
|
||||
.phase-grid,
|
||||
.boundary-row {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.requirement-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.question-grid,
|
||||
.contract-grid,
|
||||
.plan-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.phase-grid { grid-template-columns: repeat(4, 1fr); }
|
||||
.boundary-row { grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
|
||||
|
||||
.requirement-card,
|
||||
.question-card,
|
||||
.contract-card,
|
||||
.plan-card,
|
||||
.phase-card,
|
||||
.boundary-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, .94);
|
||||
box-shadow: 0 10px 28px rgba(28, 58, 90, .06);
|
||||
}
|
||||
|
||||
.requirement-card {
|
||||
min-height: 92px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.requirement-card strong,
|
||||
.question-card strong,
|
||||
.contract-card strong,
|
||||
.plan-card strong,
|
||||
.phase-card strong,
|
||||
.boundary-card strong {
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.requirement-card span,
|
||||
.question-card p,
|
||||
.contract-card p,
|
||||
.plan-card p,
|
||||
.phase-card p,
|
||||
.boundary-card p {
|
||||
margin: 0;
|
||||
color: var(--ink-soft);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.requirement-card .card-number,
|
||||
.phase-card .card-number {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: var(--primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.question-intro .quote-card {
|
||||
border-left-color: var(--primary);
|
||||
color: var(--primary-dark);
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
|
||||
.question-card,
|
||||
.contract-card,
|
||||
.plan-card {
|
||||
min-height: 148px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.question-card::before,
|
||||
.contract-card::before,
|
||||
.plan-card::before {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
margin-bottom: 18px;
|
||||
border-radius: 999px;
|
||||
background: var(--primary);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.question-card:nth-child(2)::before,
|
||||
.contract-card:nth-child(2)::before,
|
||||
.plan-card:nth-child(2)::before { background: var(--teal); }
|
||||
|
||||
.question-card:nth-child(3)::before,
|
||||
.contract-card:nth-child(3)::before,
|
||||
.plan-card:nth-child(3)::before { background: var(--orange); }
|
||||
|
||||
.question-card:nth-child(4)::before,
|
||||
.contract-card:nth-child(4)::before,
|
||||
.plan-card:nth-child(4)::before { background: #7b61a8; }
|
||||
|
||||
.card-kicker {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contract-flow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
margin-top: 22px;
|
||||
color: var(--primary-dark);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.contract-flow span {
|
||||
padding: 9px 12px;
|
||||
border: 1px solid #abd8ed;
|
||||
border-radius: 999px;
|
||||
background: var(--primary-soft);
|
||||
}
|
||||
|
||||
.contract-flow i {
|
||||
color: var(--muted);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.plan-card {
|
||||
min-height: 168px;
|
||||
}
|
||||
|
||||
.plan-card strong { font-size: 20px; }
|
||||
|
||||
.plan-card p { font-size: 15px; line-height: 1.6; }
|
||||
|
||||
.plan-foot,
|
||||
.phase-foot {
|
||||
margin: 20px auto 0;
|
||||
color: var(--ink-soft);
|
||||
font-size: clamp(15px, 1.2vw, 18px);
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.phase-card {
|
||||
min-height: 134px;
|
||||
padding: 17px;
|
||||
}
|
||||
|
||||
.phase-card strong { font-size: 15px; }
|
||||
.phase-card p { font-size: 12px; }
|
||||
|
||||
.phase-card:nth-child(2) { background: #f1faf8; }
|
||||
.phase-card:nth-child(3) { background: #fff8f1; }
|
||||
.phase-card:nth-child(4) { background: #f6f2fb; }
|
||||
.phase-card:nth-child(5) { background: #f3f8fc; }
|
||||
.phase-card:nth-child(6) { background: #f5faf8; }
|
||||
.phase-card:nth-child(7) { background: #fff8f1; }
|
||||
|
||||
.phase-foot {
|
||||
padding: 13px 18px;
|
||||
border-left: 4px solid var(--teal);
|
||||
background: var(--teal-soft);
|
||||
}
|
||||
|
||||
.boundary-card {
|
||||
padding: 17px 18px;
|
||||
}
|
||||
|
||||
.boundary-card strong { font-size: 16px; }
|
||||
.boundary-card p { font-size: 13px; }
|
||||
|
||||
.boundary-card:nth-child(2) { border-top: 4px solid var(--teal); }
|
||||
.boundary-card:nth-child(3) { border-top: 4px solid var(--orange); }
|
||||
|
||||
.boundary-note {
|
||||
margin-top: 20px;
|
||||
padding: 15px 18px;
|
||||
border: 1px solid #abd8ed;
|
||||
border-radius: 14px;
|
||||
color: var(--primary-dark);
|
||||
background: var(--primary-soft);
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.rule-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -886,13 +1128,20 @@
|
||||
.project-layout,
|
||||
.project-evidence-layout,
|
||||
.debug-layout,
|
||||
.finish-layout { grid-template-columns: 1fr; }
|
||||
.finish-layout,
|
||||
.requirement-layout,
|
||||
.question-layout { grid-template-columns: 1fr; }
|
||||
.compare-grid { grid-template-columns: 1fr; }
|
||||
.compare-arrow { width: auto; height: 30px; transform: rotate(90deg); }
|
||||
.level-grid { grid-template-columns: 1fr; }
|
||||
.method-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.evidence-row { grid-template-columns: 1fr; }
|
||||
.rule-grid { grid-template-columns: 1fr; }
|
||||
.requirement-grid,
|
||||
.question-grid,
|
||||
.contract-grid,
|
||||
.plan-grid,
|
||||
.phase-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.brand-mark { top: 22px; }
|
||||
.slide-footer span:first-child { display: none; }
|
||||
.slide-footer { justify-content: flex-end; }
|
||||
@@ -903,7 +1152,13 @@
|
||||
h2 { font-size: clamp(32px, 9vw, 46px); }
|
||||
.method-grid,
|
||||
.logic-compare,
|
||||
.scenario-buttons { grid-template-columns: 1fr; }
|
||||
.scenario-buttons,
|
||||
.requirement-grid,
|
||||
.question-grid,
|
||||
.contract-grid,
|
||||
.plan-grid,
|
||||
.phase-grid,
|
||||
.boundary-row { grid-template-columns: 1fr; }
|
||||
.flow-item { grid-template-columns: 42px 1fr; }
|
||||
.flow-item span:last-child { display: none; }
|
||||
.slide-footer { display: none; }
|
||||
@@ -930,6 +1185,22 @@
|
||||
.test-row { padding-top: 6px; padding-bottom: 6px; }
|
||||
.rule-grid { margin-top: 20px; }
|
||||
.rule-card { padding: 17px; }
|
||||
.requirement-card { min-height: 78px; padding: 13px; }
|
||||
.question-card,
|
||||
.contract-card,
|
||||
.plan-card { min-height: 126px; padding: 16px; }
|
||||
.question-card::before,
|
||||
.contract-card::before,
|
||||
.plan-card::before { margin-bottom: 12px; }
|
||||
.plan-layout { gap: 14px; }
|
||||
.plan-layout h2 { margin-bottom: 8px; }
|
||||
.plan-card { min-height: 112px; padding: 14px; }
|
||||
.plan-card::before { margin-bottom: 9px; }
|
||||
.plan-card strong { font-size: 17px; }
|
||||
.plan-card p { font-size: 13px; line-height: 1.45; }
|
||||
.plan-foot { margin-top: 8px; font-size: 14px; line-height: 1.35; }
|
||||
.phase-card { min-height: 108px; padding: 13px; }
|
||||
.phase-foot { margin-top: 14px; padding: 10px 13px; font-size: 14px; }
|
||||
.slide-footer { margin-top: 16px; }
|
||||
}
|
||||
|
||||
@@ -950,7 +1221,7 @@
|
||||
<div class="brand-mark">AI PROGRAMMING · FIELD CASE</div>
|
||||
|
||||
<main class="deck" id="deck" aria-live="polite">
|
||||
<section class="slide is-active" data-slide="0" aria-label="第 1 页：封面">
|
||||
<section class="slide is-active" data-slide="0" data-title="封面" aria-label="第 1 页：封面">
|
||||
<div class="slide-body cover-grid">
|
||||
<div>
|
||||
<p class="eyebrow">3 MONTHS · ONE REAL PROJECT</p>
|
||||
@@ -960,39 +1231,140 @@
|
||||
<aside class="cover-card" aria-label="汇报信息">
|
||||
<span class="label">CASE STUDY</span>
|
||||
<strong>AxiOmron<br>PCBCheck</strong>
|
||||
<div class="meta-row"><span>项目</span><b>工业上位机</b></div>
|
||||
<div class="meta-row"><span>重点</span><b>上手 · 调试 · 边界</b></div>
|
||||
<div class="meta-row"><span>时长</span><b>8–10 MIN</b></div>
|
||||
</aside>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>一段真实的 AI 编程实践</span><span class="slide-index">01 / 08</span></footer>
|
||||
<div class="meta-row"><span>项目</span><b>工业上位机</b></div>
|
||||
<div class="meta-row"><span>重点</span><b>上手 · 调试 · 边界</b></div>
|
||||
<div class="meta-row"><span>时长</span><b>10–12 MIN</b></div>
|
||||
</aside>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>一段真实的 AI 编程实践</span><span class="slide-index">01 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="1" aria-label="第 2 页：什么是 Vibe Coding">
|
||||
<section class="slide" data-slide="1" data-title="初始需求" aria-label="第 2 页：初始需求">
|
||||
<div class="slide-body requirement-layout">
|
||||
<div class="requirement-intro">
|
||||
<p class="eyebrow">01 / THE FIRST REQUEST</p>
|
||||
<h2>最开始，我只想让它<br><span class="orange">先跑起来</span>。</h2>
|
||||
<div class="quote-card">“我需要写一个程序：PCB 到位后扫码，根据条码检查文件是否存在，再把结果返回给 PLC。”</div>
|
||||
<p class="small-note">这就是《开发流程.txt》里的最初版本：目标很清楚，但工程边界还没有被说出来。</p>
|
||||
</div>
|
||||
<div class="requirement-grid" aria-label="初始需求清单">
|
||||
<article class="requirement-card"><span class="card-number">01</span><strong>PCB 到位后开始处理</strong><span>收到触发，进入本轮任务。</span></article>
|
||||
<article class="requirement-card"><span class="card-number">02</span><strong>读取一个条码</strong><span>拿到 PCB 身份信息。</span></article>
|
||||
<article class="requirement-card"><span class="card-number">03</span><strong>检查对应文件</strong><span>根据条码查找指定文件。</span></article>
|
||||
<article class="requirement-card"><span class="card-number">04</span><strong>文件存在显示正常</strong><span>给出 OK 结果。</span></article>
|
||||
<article class="requirement-card"><span class="card-number">05</span><strong>文件不存在显示异常</strong><span>给出 NG 结果。</span></article>
|
||||
<article class="requirement-card"><span class="card-number">06</span><strong>页面显示当前状态</strong><span>看到条码、结果和日志。</span></article>
|
||||
<article class="requirement-card"><span class="card-number">07</span><strong>保存最近处理记录</strong><span>之后可以回看过程。</span></article>
|
||||
<article class="requirement-card"><span class="card-number">08</span><strong>先使用模拟数据</strong><span>不一开始连接真实设备。</span></article>
|
||||
<article class="requirement-card"><span class="card-number">09</span><strong>模拟正常、异常、故障</strong><span>页面提供可控演示入口。</span></article>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>初版需求：先把业务主线讲清楚</span><span class="slide-index">02 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="2" data-title="第一次对话" aria-label="第 3 页：第一次对话">
|
||||
<div class="slide-body question-layout">
|
||||
<div class="question-intro">
|
||||
<p class="eyebrow">02 / ASK BEFORE BUILDING</p>
|
||||
<h2>真正开始写代码前，<br>我先问：<span class="accent">还缺什么？</span></h2>
|
||||
<div class="quote-card">“还需要哪些信息才能开始写程序？”</div>
|
||||
<p class="small-note">这一步把“能不能写”变成“哪些事实还没有确认”。</p>
|
||||
</div>
|
||||
<div class="question-grid" aria-label="第一次对话中需要补齐的信息">
|
||||
<article class="question-card"><span class="card-kicker">01 · PLC</span><strong>触发和握手怎么定义？</strong><p>型号、协议、点位、保持/脉冲、复位、应答、超时和异常恢复。</p></article>
|
||||
<article class="question-card"><span class="card-kicker">02 · SCANNERS</span><strong>两把扫码枪怎么返回？</strong><p>IP、端口、通信角色、结束符、编码、超时、双枪关系和断线行为。</p></article>
|
||||
<article class="question-card"><span class="card-kicker">03 · FILE RULES</span><strong>什么样的文件算通过？</strong><p>条码格式、文件名规则、精确/模糊匹配、目录类型、空文件和正在写入的处理。</p></article>
|
||||
<article class="question-card"><span class="card-kicker">04 · APP & RECORDS</span><strong>程序要怎样被使用和追溯？</strong><p>界面、配置、日志、记录、权限、模拟入口、部署方式和是否需要数据库。</p></article>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>好的协作不是马上给答案，而是先把问题问完整</span><span class="slide-index">03 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="3" data-title="需求逐步完善" aria-label="第 4 页：需求逐步完善">
|
||||
<div class="slide-body contract-layout">
|
||||
<div>
|
||||
<p class="eyebrow">03 / TURN QUESTIONS INTO CONTRACTS</p>
|
||||
<h2>需求不再只是“做什么”，<br>还要说清楚<span class="teal">“边界在哪里”</span>。</h2>
|
||||
</div>
|
||||
<div class="contract-grid" aria-label="需求完善后的四类工程契约">
|
||||
<article class="contract-card"><span class="card-kicker">PLC CONTRACT</span><strong>到位、复位、结果、应答</strong><p>定义一轮任务什么时候开始、什么时候结束，以及长保持信号如何避免重复触发。</p></article>
|
||||
<article class="contract-card"><span class="card-kicker">SCANNER CONTRACT</span><strong>双路并发、超时、报文边界</strong><p>不把一次 TCP Receive 想当然地当成完整条码，明确无结束符和迟到结果的处理。</p></article>
|
||||
<article class="contract-card"><span class="card-kicker">FILE CONTRACT</span><strong>路径安全、结果分类</strong><p>把条码清洗、文件存在、目录不可访问和路径越界区分成可追踪的结果。</p></article>
|
||||
<article class="contract-card"><span class="card-kicker">APP CONTRACT</span><strong>状态可见、过程可回看</strong><p>把设备状态、当前任务、日志、统计和模拟场景放进可观察的界面闭环。</p></article>
|
||||
</div>
|
||||
<div class="contract-flow" aria-label="需求演进链路">
|
||||
<span>功能描述</span><i>→</i><span>条件边界</span><i>→</i><span>失败策略</span><i>→</i><span>验收证据</span>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>每补充一个边界，现场就少一个靠猜的地方</span><span class="slide-index">04 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="4" data-title="完整项目计划" aria-label="第 5 页：完整项目计划">
|
||||
<div class="slide-body plan-layout">
|
||||
<div>
|
||||
<p class="eyebrow">04 / THE COMPLETE PROJECT PLAN</p>
|
||||
<h2>对话的终点，<br>是一份<span class="accent">可以执行的计划</span>。</h2>
|
||||
</div>
|
||||
<div class="plan-grid" aria-label="完整项目计划的四个层面">
|
||||
<article class="plan-card"><span class="card-kicker">01 · GOAL</span><strong>目标</strong><p>让 PCB 从到位、扫码、文件校验到 PLC 结果反馈，形成一条可解释、可追溯的业务闭环。</p></article>
|
||||
<article class="plan-card"><span class="card-kicker">02 · WORKFLOW</span><strong>流程</strong><p>到位触发 → 双枪扫描 → 条码校验 → 文件判断 → 结果保持 → 应答/复位 → 记录完成。</p></article>
|
||||
<article class="plan-card"><span class="card-kicker">03 · ARCHITECTURE</span><strong>架构</strong><p>当前项目落地为 .NET 8 + WPF；设备通信、流程编排、界面状态和配置日志保持清晰边界。</p></article>
|
||||
<article class="plan-card"><span class="card-kicker">04 · ACCEPTANCE</span><strong>测试与验收</strong><p>单元测试和 Fake 设备先验证逻辑，再用真实 PLC、扫描枪和文件服务完成现场联调。</p></article>
|
||||
</div>
|
||||
<p class="plan-foot"><strong>计划的价值：</strong>把“我想要一个程序”翻译成目标、状态、接口、阶段、测试和交付门槛。</p>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>完整计划不是凭空出现的，而是对话逐项补齐后的结果</span><span class="slide-index">05 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="5" data-title="开发阶段路线图" aria-label="第 6 页：开发阶段路线图">
|
||||
<div class="slide-body phase-layout">
|
||||
<div>
|
||||
<p class="eyebrow">05 / BUILD IN RISK ORDER</p>
|
||||
<h2>计划被拆成七个小闭环，<br>每一步都有<span class="teal">可以验证的产物</span>。</h2>
|
||||
</div>
|
||||
<div class="phase-grid" aria-label="七个开发阶段">
|
||||
<article class="phase-card"><span class="card-number">01</span><strong>需求与协议确认</strong><p>点位、握手、报文、结果码和文件规则。</p></article>
|
||||
<article class="phase-card"><span class="card-number">02</span><strong>项目骨架</strong><p>WPF、配置、日志、依赖注入和基础状态。</p></article>
|
||||
<article class="phase-card"><span class="card-number">03</span><strong>PLC 通信</strong><p>读写、超时、断线、重连和模拟接口。</p></article>
|
||||
<article class="phase-card"><span class="card-number">04</span><strong>双扫描枪</strong><p>并发触发、无结束符、首个有效结果。</p></article>
|
||||
<article class="phase-card"><span class="card-number">05</span><strong>流程编排</strong><p>任务去重、文件安全、结果保持和恢复。</p></article>
|
||||
<article class="phase-card"><span class="card-number">06</span><strong>状态界面</strong><p>设备、任务、统计、日志和操作权限。</p></article>
|
||||
<article class="phase-card"><span class="card-number">07</span><strong>测试与交付</strong><p>单测、Fake 流程、异常测试和现场验收。</p></article>
|
||||
</div>
|
||||
<p class="phase-foot">计划不是一次写死：事实确认后可以调整实现，但每次调整都要回到边界、证据和验收标准。</p>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>AI 加快每个小闭环，我负责决定闭环是否成立</span><span class="slide-index">06 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="6" data-title="Vibe Coding 上手难度" aria-label="第 7 页：Vibe Coding 上手难度">
|
||||
<div class="slide-body">
|
||||
<p class="eyebrow">01 / WHAT IS VIBE CODING</p>
|
||||
<h2>改变的不是“要不要思考”，<br>而是<span class="accent">把时间花在哪里</span>。</h2>
|
||||
<div class="compare-grid">
|
||||
<article class="compare-card">
|
||||
<span class="mini-label">过去</span>
|
||||
<h3>自己翻译成每一行代码</h3>
|
||||
<p>需求 → 查资料 → 写代码 → 运行 → 修改</p>
|
||||
<p class="eyebrow">06 / HOW HARD IS IT</p>
|
||||
<h2>上手不难，<br>难的是从“能跑”走到<span class="orange">“可靠”</span>。</h2>
|
||||
<div class="level-grid">
|
||||
<article class="level-card">
|
||||
<span class="level-badge">门槛低</span>
|
||||
<h3>做出原型</h3>
|
||||
<p>会描述需求、会运行项目，就能很快看到第一个结果。</p>
|
||||
</article>
|
||||
<div class="compare-arrow" aria-hidden="true">→</div>
|
||||
<article class="compare-card is-now">
|
||||
<span class="mini-label">现在</span>
|
||||
<h3>先描述目标，再检查结果</h3>
|
||||
<p>讲清需求 → AI 实现 → 我来验证 → 继续迭代</p>
|
||||
<article class="level-card">
|
||||
<span class="level-badge">需要方法</span>
|
||||
<h3>做到可用</h3>
|
||||
<p>要会拆小任务、补充上下文，并检查 AI 实际改了什么。</p>
|
||||
</article>
|
||||
<article class="level-card">
|
||||
<span class="level-badge">仍需专业判断</span>
|
||||
<h3>做到可靠</h3>
|
||||
<p>需要理解业务风险，并验证断网、超时和错误输入等异常场景。</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="analogy"><strong>一个简单比喻：</strong>像和一名速度很快的程序员结对工作——AI 负责加速，我负责方向与验收。</div>
|
||||
<p class="level-footer"><strong>它降低的是写代码的门槛，</strong>没有消除软件工程本身的难度。</p>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>Vibe Coding 不是一句话生成全部，而是持续对话与验证</span><span class="slide-index">02 / 08</span></footer>
|
||||
<footer class="slide-footer"><span>有代码基础，上手会更快；没有代码基础，也可以从小工具开始</span><span class="slide-index">07 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="2" aria-label="第 3 页：项目案例">
|
||||
<section class="slide" data-slide="7" data-title="实际项目运行" aria-label="第 8 页：实际项目运行">
|
||||
<div class="slide-body">
|
||||
<p class="eyebrow">02 / THE PROJECT</p>
|
||||
<p class="eyebrow">07 / THE PROJECT RUNS</p>
|
||||
<h2>这不是概念图，<br><span class="teal">程序真的运行起来了</span>。</h2>
|
||||
<div class="project-evidence-layout">
|
||||
<figure class="app-shot-card">
|
||||
@@ -1014,39 +1386,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>运行界面是本地证据，不等同于真实 PLC / SFTP 现场验收</span><span class="slide-index">03 / 08</span></footer>
|
||||
<footer class="slide-footer"><span>运行界面是本地证据，不等同于真实 PLC / SFTP 现场验收</span><span class="slide-index">08 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="3" aria-label="第 4 页：上手难度">
|
||||
<div class="slide-body">
|
||||
<p class="eyebrow">03 / HOW HARD IS IT</p>
|
||||
<h2>上手不难，<br>难的是从“能跑”走到<span class="orange">“可靠”</span>。</h2>
|
||||
<div class="level-grid">
|
||||
<article class="level-card">
|
||||
<span class="level-badge">门槛低</span>
|
||||
<h3>做出原型</h3>
|
||||
<p>会描述需求、会运行项目，就能很快看到第一个结果。</p>
|
||||
</article>
|
||||
<article class="level-card">
|
||||
<span class="level-badge">需要方法</span>
|
||||
<h3>做到可用</h3>
|
||||
<p>要会拆小任务、补充上下文，并检查 AI 实际改了什么。</p>
|
||||
</article>
|
||||
<article class="level-card">
|
||||
<span class="level-badge">仍需专业判断</span>
|
||||
<h3>做到可靠</h3>
|
||||
<p>需要理解业务风险，并验证断网、超时和错误输入等异常场景。</p>
|
||||
</article>
|
||||
</div>
|
||||
<p class="level-footer"><strong>它降低的是写代码的门槛，</strong>没有消除软件工程本身的难度。</p>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>有代码基础，上手会更快；没有代码基础，也可以从小工具开始</span><span class="slide-index">04 / 08</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="4" aria-label="第 5 页：真实调试案例">
|
||||
<section class="slide" data-slide="8" data-title="真实调试案例" aria-label="第 9 页：真实调试案例">
|
||||
<div class="slide-body debug-layout">
|
||||
<div>
|
||||
<p class="eyebrow">04 / A REAL DEBUGGING CASE</p>
|
||||
<p class="eyebrow">08 / A REAL DEBUGGING CASE</p>
|
||||
<h2>信号写成功了，<br>为什么<span class="orange">文件不能删</span>？</h2>
|
||||
<div class="logic-compare" aria-label="修改前后的代码逻辑对比">
|
||||
<article class="logic-panel is-wrong">
|
||||
@@ -1080,12 +1426,12 @@ if (ackReceived)
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>调试结论：协议成功 ≠ 业务完成</span><span class="slide-index">05 / 08</span></footer>
|
||||
<footer class="slide-footer"><span>调试结论：协议成功 ≠ 业务完成</span><span class="slide-index">09 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="5" aria-label="第 6 页：五步调试法">
|
||||
<section class="slide" data-slide="9" data-title="五步调试法" aria-label="第 10 页：五步调试法">
|
||||
<div class="slide-body">
|
||||
<p class="eyebrow">05 / DEBUG WITH AI</p>
|
||||
<p class="eyebrow">09 / DEBUG WITH AI</p>
|
||||
<h2>程序出错时，<br>我用这套<span class="accent">五步调试法</span>。</h2>
|
||||
<div class="method-grid">
|
||||
<article class="step-card"><span class="step-number">01</span><h3>先复现</h3><p>说明做了什么、期望什么、实际发生什么。</p></article>
|
||||
@@ -1104,37 +1450,43 @@ if (ackReceived)
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>证据越完整，AI 越不容易靠猜</span><span class="slide-index">06 / 08</span></footer>
|
||||
<footer class="slide-footer"><span>证据越完整，AI 越不容易靠猜</span><span class="slide-index">10 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="6" aria-label="第 7 页：注意事项">
|
||||
<section class="slide" data-slide="10" data-title="工程边界与验收" aria-label="第 11 页：工程边界与验收">
|
||||
<div class="slide-body">
|
||||
<p class="eyebrow">06 / FOUR THINGS TO REMEMBER</p>
|
||||
<h2>Vibe Coding 很快，<br>但这四条<span class="orange">不能省</span>。</h2>
|
||||
<p class="eyebrow">10 / BOUNDARIES & ACCEPTANCE</p>
|
||||
<h2>Vibe Coding 很快，<br>但这些<span class="orange">不能省</span>。</h2>
|
||||
<div class="rule-grid">
|
||||
<article class="rule-card"><span class="rule-no">01</span><div><h3>任务要拆小</h3><p>每一步都应该能运行、能观察、能撤回。</p></div></article>
|
||||
<article class="rule-card"><span class="rule-no">02</span><div><h3>修改要看懂</h3><p>至少确认改了哪些文件、为什么改、影响到哪里。</p></div></article>
|
||||
<article class="rule-card"><span class="rule-no">03</span><div><h3>本地不等于现场</h3><p>模拟测试不能替代真实设备、真实网络和实际权限。</p></div></article>
|
||||
<article class="rule-card"><span class="rule-no">03</span><div><h3>模拟不等于现场</h3><p>Fake 设备只能先验证逻辑，不能替代真实 PLC、扫描枪和文件服务。</p></div></article>
|
||||
<article class="rule-card"><span class="rule-no">04</span><div><h3>高风险动作默认关闭</h3><p>删除、付款、放行等动作必须有明确条件和可控开关。</p></div></article>
|
||||
</div>
|
||||
<div class="boundary-row" aria-label="交付边界">
|
||||
<article class="boundary-card"><strong>异常可恢复</strong><p>断线、超时、目录不可访问，都要有状态、日志和恢复策略。</p></article>
|
||||
<article class="boundary-card"><strong>过程可追溯</strong><p>每一轮任务都能回看输入、判断、结果和失败原因。</p></article>
|
||||
<article class="boundary-card"><strong>现场才算验收</strong><p>真实点位、通信边界、权限和连续生产稳定性必须现场确认。</p></article>
|
||||
</div>
|
||||
<div class="boundary-note"><strong>交付门槛：</strong>本地构建与测试通过只是软件证据；真实设备和现场权限通过，才是生产验收。</div>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>AI 可以给建议，但业务责任和最终判断仍然属于人</span><span class="slide-index">07 / 08</span></footer>
|
||||
<footer class="slide-footer"><span>AI 可以给建议，但业务责任和最终判断仍然属于人</span><span class="slide-index">11 / 12</span></footer>
|
||||
</section>
|
||||
|
||||
<section class="slide" data-slide="7" aria-label="第 8 页：总结">
|
||||
<section class="slide" data-slide="11" data-title="总结" aria-label="第 12 页：总结">
|
||||
<div class="slide-body finish-layout">
|
||||
<div>
|
||||
<p class="eyebrow">07 / TAKEAWAY</p>
|
||||
<h2>上手不难，<br>真正的能力是<span class="accent">会验证</span>。</h2>
|
||||
<p class="finish-statement">AI 没有让我不再需要技术，而是让我把更多时间放在理解问题、判断风险和验证结果上。</p>
|
||||
<p class="eyebrow">11 / TAKEAWAY</p>
|
||||
<h2>从一句话需求，<br>到<span class="accent">可验证的完整计划</span>。</h2>
|
||||
<p class="finish-statement">AI 没有替我完成工程判断，而是帮我更快地提问、拆解、实现和验证，最后把一个模糊需求变成能运行、能追溯、知道边界的项目。</p>
|
||||
</div>
|
||||
<div class="takeaway-list">
|
||||
<article class="takeaway-card"><b>会描述</b><span>把目标、条件和期望结果讲清楚</span></article>
|
||||
<article class="takeaway-card"><b>会调试</b><span>用日志和测试逐步排除原因</span></article>
|
||||
<article class="takeaway-card"><b>有边界</b><span>知道什么时候不能完全相信 AI</span></article>
|
||||
<article class="takeaway-card"><b>会提问</b><span>把需求里的空白和风险问出来</span></article>
|
||||
<article class="takeaway-card"><b>会拆解</b><span>把自然语言变成流程、阶段和验收标准</span></article>
|
||||
<article class="takeaway-card"><b>会验证</b><span>把本地证据与真实现场验收分开</span></article>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-footer"><span>谢谢 · AxiOmron.PcbCheck</span><span class="slide-index">08 / 08</span></footer>
|
||||
<footer class="slide-footer"><span>谢谢 · AxiOmron.PcbCheck</span><span class="slide-index">12 / 12</span></footer>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -1156,6 +1508,21 @@ if (ackReceived)
|
||||
const scenarioResult = document.getElementById('scenarioResult');
|
||||
let activeSlideIndex = 0;
|
||||
|
||||
/**
|
||||
* 根据页面数量统一更新页脚编号和无障碍页面标题。
|
||||
* @returns {void} 只同步每个页面的展示元数据，不返回数据。
|
||||
*/
|
||||
function syncSlideMetadata() {
|
||||
const totalLabel = String(slides.length).padStart(2, '0');
|
||||
slides.forEach((slide, index) => {
|
||||
const pageNumber = String(index + 1).padStart(2, '0');
|
||||
const title = slide.dataset.title || `第 ${index + 1} 页`;
|
||||
const indexLabel = slide.querySelector('.slide-index');
|
||||
if (indexLabel) indexLabel.textContent = `${pageNumber} / ${totalLabel}`;
|
||||
slide.setAttribute('aria-label', `第 ${index + 1} 页：${title}`);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建汇报页面圆点导航，并为每个圆点绑定跳转行为。
|
||||
* @returns {void} 只更新页面导航结构，不返回数据。
|
||||
@@ -1247,6 +1614,7 @@ if (ackReceived)
|
||||
if (event.key === 'End') setSlide(slides.length - 1);
|
||||
});
|
||||
|
||||
syncSlideMetadata();
|
||||
createDots();
|
||||
setSlide(0);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user