424 lines
23 KiB
HTML
424 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280, height=720">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: 'Inter', -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
|
||
.slide {
|
||
width: 1280px; height: 720px;
|
||
display: flex; flex-direction: column;
|
||
padding: 64px 80px;
|
||
background: linear-gradient(160deg, #F5F5FA 0%, #EBEBF0 35%, #F0F0F5 100%);
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.slide::before {
|
||
content: ''; position: absolute; top: -40%; right: -25%;
|
||
width: 70%; height: 90%;
|
||
background: radial-gradient(ellipse, rgba(0,122,255,0.08) 0%, transparent 60%);
|
||
pointer-events: none;
|
||
}
|
||
.glass {
|
||
background: rgba(255,255,255,0.6);
|
||
backdrop-filter: blur(48px); -webkit-backdrop-filter: blur(48px);
|
||
border: 1px solid rgba(255,255,255,0.7);
|
||
border-radius: 28px;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.8) inset;
|
||
}
|
||
.glass-strong {
|
||
background: rgba(255,255,255,0.72);
|
||
backdrop-filter: blur(56px); -webkit-backdrop-filter: blur(56px);
|
||
border: 1px solid rgba(255,255,255,0.75);
|
||
border-radius: 32px;
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.9) inset;
|
||
}
|
||
.text-dark { color: #1D1D1F; }
|
||
.text-muted { color: #8E8E93; }
|
||
.accent { color: #007AFF; }
|
||
h1 { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; }
|
||
h2 { font-size: 18px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #007AFF; }
|
||
.kicker { font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0,0,0,0.45); }
|
||
.row { display: flex; gap: 36px; }
|
||
.col { display: flex; flex-direction: column; gap: 18px; }
|
||
.pill {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
padding: 10px 14px; border-radius: 999px;
|
||
background: rgba(0,122,255,0.10);
|
||
color: #0B5ED7; font-weight: 600; font-size: 14px;
|
||
border: 1px solid rgba(0,122,255,0.12);
|
||
}
|
||
.list p { font-size: 20px; line-height: 1.8; color: #1D1D1F; }
|
||
.list p span { color: #8E8E93; }
|
||
.icon { font-size: 42px; line-height: 1; }
|
||
.img-card { width: 420px; height: 420px; border-radius: 22px; overflow: hidden; }
|
||
.img-card.wide { width: 520px; height: 360px; }
|
||
.tag {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
font-size: 14px; font-weight: 600;
|
||
color: rgba(0,0,0,0.55);
|
||
padding: 8px 12px; border-radius: 12px;
|
||
background: rgba(255,255,255,0.55);
|
||
border: 1px solid rgba(255,255,255,0.7);
|
||
}
|
||
.small { font-size: 16px; line-height: 1.65; color: rgba(0,0,0,0.65); }
|
||
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
.metric { padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.75); }
|
||
.metric .v { font-size: 26px; font-weight: 800; color: #1D1D1F; letter-spacing: -0.02em; }
|
||
.metric .k { font-size: 14px; font-weight: 700; color: rgba(0,0,0,0.50); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Slide 1: 封面 -->
|
||
<div class="slide" id="slide-1" style="justify-content:center; align-items:center;">
|
||
<div class="glass-strong" style="padding: 56px 72px; text-align:center; width: 920px;">
|
||
<div class="kicker" style="margin-bottom: 10px;">Conversation → SOP → Skill</div>
|
||
<h1 class="text-dark" style="margin-bottom: 18px;">家里 NAS 对话描述</h1>
|
||
<p class="text-muted" style="font-size: 22px; font-weight: 600;">DiskStation · Time Machine · 外网挂载 · 自动沉淀</p>
|
||
<div style="display:flex; justify-content:center; gap:12px; margin-top: 26px;">
|
||
<span class="pill">💧 诊断</span>
|
||
<span class="pill">🪙 运维</span>
|
||
<span class="pill">🌱 产出</span>
|
||
<span class="pill">🔥 复盘</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 2: 对话起点（问题） -->
|
||
<div class="slide" id="slide-2" style="justify-content:center;">
|
||
<h2 style="margin-bottom: 28px;">What Happened</h2>
|
||
<div class="row" style="align-items:center;">
|
||
<div class="col" style="flex: 1;">
|
||
<div class="glass-strong" style="padding: 34px 40px;">
|
||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px;">
|
||
<span class="icon">⏱️</span>
|
||
<span class="tag">对话触发</span>
|
||
</div>
|
||
<div class="list">
|
||
<p>① 时间机器：<span>红点 + 等待首次备份</span></p>
|
||
<p>② 弹窗：<span>未识别备份磁盘（DiskStation.local）</span></p>
|
||
<p>③ 诉求：<span>外网挂载 1TB 共享到 Finder「位置」</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="glass" style="padding: 22px 28px;">
|
||
<div class="small">关键目标：能自动就自动；做不了就落材料；最后沉淀到 Skill，可复用。</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass img-card" style="padding: 16px;">
|
||
<!-- 配图：抽象 NAS + 云 -->
|
||
<svg viewBox="0 0 420 420" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0A84FF" stop-opacity="0.18"/>
|
||
<stop offset="100%" stop-color="#34C759" stop-opacity="0.14"/>
|
||
</linearGradient>
|
||
<filter id="s1" x="-20%" y="-20%" width="140%" height="140%">
|
||
<feDropShadow dx="0" dy="14" stdDeviation="12" flood-color="#000" flood-opacity="0.10"/>
|
||
</filter>
|
||
</defs>
|
||
<rect x="0" y="0" width="420" height="420" rx="18" fill="url(#g1)"/>
|
||
<g filter="url(#s1)">
|
||
<rect x="72" y="130" width="276" height="170" rx="18" fill="rgba(255,255,255,0.72)" stroke="rgba(255,255,255,0.75)"/>
|
||
<rect x="98" y="160" width="224" height="20" rx="10" fill="rgba(0,0,0,0.08)"/>
|
||
<rect x="98" y="194" width="224" height="20" rx="10" fill="rgba(0,0,0,0.08)"/>
|
||
<rect x="98" y="228" width="224" height="20" rx="10" fill="rgba(0,0,0,0.08)"/>
|
||
<circle cx="108" cy="276" r="6" fill="#34C759"/>
|
||
<circle cx="130" cy="276" r="6" fill="#FF9F0A"/>
|
||
<circle cx="152" cy="276" r="6" fill="#FF453A"/>
|
||
</g>
|
||
<g>
|
||
<path d="M274 92c18 0 33 14 33 31 0 2 0 4-1 6h4c18 0 33 14 33 31s-15 31-33 31H149c-20 0-36-15-36-34s16-33 36-33c4-18 21-32 40-32 13 0 25 6 33 15 6-9 15-15 27-15z"
|
||
fill="rgba(255,255,255,0.75)" stroke="rgba(255,255,255,0.72)"/>
|
||
<text x="210" y="170" text-anchor="middle" font-size="16" font-weight="700" fill="rgba(0,0,0,0.55)">DiskStation ↔ 外网</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 3: 资产与路径（两台 NAS） -->
|
||
<div class="slide" id="slide-3" style="justify-content:center;">
|
||
<h2 style="margin-bottom: 28px;">Assets Map</h2>
|
||
<div class="row" style="align-items:center;">
|
||
<div class="glass-strong" style="flex:1; padding: 34px 40px;">
|
||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px;">
|
||
<span class="icon">🗺️</span>
|
||
<span class="tag">公司 / 家里 两套 NAS</span>
|
||
</div>
|
||
<div class="grid2">
|
||
<div class="metric">
|
||
<div class="v">CKB NAS</div>
|
||
<div class="k">192.168.1.201</div>
|
||
<div class="small" style="margin-top:10px;">外网：open.quwanzhi.com</div>
|
||
<div class="small">Gitea：:3000（已穿透）</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="v">家里 DiskStation</div>
|
||
<div class="k">192.168.110.29</div>
|
||
<div class="small" style="margin-top:10px;">外网：opennas2.quwanzhi.com</div>
|
||
<div class="small">Time Machine：共享</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass" style="padding: 18px 22px; margin-top: 16px;">
|
||
<div class="small">对话中所有“定位/修复/挂载”，都先区分：110 网段=家里；1 网段=公司。</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass img-card wide" style="padding: 16px;">
|
||
<!-- 配图：双节点结构图（SVG） -->
|
||
<svg viewBox="0 0 520 360" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="g2" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#FF9F0A" stop-opacity="0.12"/>
|
||
<stop offset="100%" stop-color="#0A84FF" stop-opacity="0.14"/>
|
||
</linearGradient>
|
||
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
||
<path d="M0,0 L8,3 L0,6 Z" fill="rgba(0,0,0,0.35)"/>
|
||
</marker>
|
||
</defs>
|
||
<rect x="0" y="0" width="520" height="360" rx="18" fill="url(#g2)"/>
|
||
<rect x="48" y="92" width="190" height="176" rx="18" fill="rgba(255,255,255,0.74)"/>
|
||
<rect x="282" y="92" width="190" height="176" rx="18" fill="rgba(255,255,255,0.74)"/>
|
||
<text x="143" y="132" text-anchor="middle" font-size="16" font-weight="800" fill="rgba(0,0,0,0.62)">CKB NAS</text>
|
||
<text x="377" y="132" text-anchor="middle" font-size="16" font-weight="800" fill="rgba(0,0,0,0.62)">家里 NAS</text>
|
||
<text x="143" y="162" text-anchor="middle" font-size="13" font-weight="700" fill="rgba(0,0,0,0.48)">open.quwanzhi.com</text>
|
||
<text x="377" y="162" text-anchor="middle" font-size="13" font-weight="700" fill="rgba(0,0,0,0.48)">opennas2.quwanzhi.com</text>
|
||
<g stroke="rgba(0,0,0,0.35)" stroke-width="2" marker-end="url(#arrow)">
|
||
<line x1="238" y1="180" x2="282" y2="180"/>
|
||
<line x1="282" y1="180" x2="238" y2="180"/>
|
||
</g>
|
||
<text x="260" y="206" text-anchor="middle" font-size="12" fill="rgba(0,0,0,0.45)">对外入口 / 穿透</text>
|
||
<g>
|
||
<rect x="78" y="196" width="130" height="48" rx="14" fill="rgba(0,122,255,0.10)" stroke="rgba(0,122,255,0.14)"/>
|
||
<text x="143" y="226" text-anchor="middle" font-size="13" font-weight="800" fill="rgba(0,0,0,0.55)">Gitea / 同步</text>
|
||
</g>
|
||
<g>
|
||
<rect x="312" y="196" width="130" height="48" rx="14" fill="rgba(52,199,89,0.10)" stroke="rgba(52,199,89,0.14)"/>
|
||
<text x="377" y="226" text-anchor="middle" font-size="13" font-weight="800" fill="rgba(0,0,0,0.55)">Time Machine</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 4: 流程图（核心） -->
|
||
<div class="slide" id="slide-4" style="justify-content:center;">
|
||
<h2 style="margin-bottom: 22px;">Flowchart</h2>
|
||
<div class="row" style="align-items:center;">
|
||
<div class="col" style="flex:1;">
|
||
<div class="glass-strong" style="padding: 28px 34px;">
|
||
<div style="display:flex; align-items:center; justify-content:space-between;">
|
||
<span class="icon">🔁</span>
|
||
<span class="tag">从对话 → SOP → Skill</span>
|
||
</div>
|
||
<div class="small" style="margin-top: 12px;">
|
||
这页是“对话行动链”：诊断 → 修复 → 验证 → 沉淀。后续同类问题直接复用。
|
||
</div>
|
||
</div>
|
||
<div class="glass" style="padding: 18px 22px;">
|
||
<div class="small">产出物：检测脚本、排查文档、Skill 小节、外网挂载脚本、复盘规则。</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass img-card wide" style="padding: 16px;">
|
||
<!-- 配图：流程图 SVG -->
|
||
<svg viewBox="0 0 520 360" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="g3" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0A84FF" stop-opacity="0.10"/>
|
||
<stop offset="100%" stop-color="#BF5AF2" stop-opacity="0.10"/>
|
||
</linearGradient>
|
||
<marker id="arrow2" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
|
||
<path d="M0,0 L10,6 L0,12 Z" fill="rgba(0,0,0,0.35)"/>
|
||
</marker>
|
||
</defs>
|
||
<rect x="0" y="0" width="520" height="360" rx="18" fill="url(#g3)"/>
|
||
<!-- nodes -->
|
||
<g font-family="Inter, -apple-system, sans-serif" font-weight="800">
|
||
<rect x="48" y="52" width="190" height="56" rx="16" fill="rgba(255,255,255,0.76)"/>
|
||
<text x="143" y="86" text-anchor="middle" font-size="14" fill="rgba(0,0,0,0.60)">识别问题（对话触发）</text>
|
||
|
||
<rect x="282" y="52" width="190" height="56" rx="16" fill="rgba(255,255,255,0.76)"/>
|
||
<text x="377" y="86" text-anchor="middle" font-size="14" fill="rgba(0,0,0,0.60)">自动检测（脚本）</text>
|
||
|
||
<rect x="48" y="136" width="190" height="56" rx="16" fill="rgba(255,255,255,0.76)"/>
|
||
<text x="143" y="170" text-anchor="middle" font-size="14" fill="rgba(0,0,0,0.60)">Time Machine 修复</text>
|
||
|
||
<rect x="282" y="136" width="190" height="56" rx="16" fill="rgba(255,255,255,0.76)"/>
|
||
<text x="377" y="170" text-anchor="middle" font-size="14" fill="rgba(0,0,0,0.60)">外网挂载（SMB+frp）</text>
|
||
|
||
<rect x="48" y="220" width="190" height="56" rx="16" fill="rgba(255,255,255,0.76)"/>
|
||
<text x="143" y="254" text-anchor="middle" font-size="14" fill="rgba(0,0,0,0.60)">验证（再跑脚本）</text>
|
||
|
||
<rect x="282" y="220" width="190" height="56" rx="16" fill="rgba(255,255,255,0.76)"/>
|
||
<text x="377" y="254" text-anchor="middle" font-size="14" fill="rgba(0,0,0,0.60)">沉淀：文档+Skill</text>
|
||
</g>
|
||
|
||
<!-- arrows -->
|
||
<g stroke="rgba(0,0,0,0.35)" stroke-width="2.2" marker-end="url(#arrow2)" fill="none">
|
||
<path d="M238 80 L282 80"/>
|
||
<path d="M377 108 L377 136"/>
|
||
<path d="M282 164 L238 164"/>
|
||
<path d="M143 192 L143 220"/>
|
||
<path d="M238 248 L282 248"/>
|
||
</g>
|
||
|
||
<g font-family="Inter, -apple-system, sans-serif" font-size="12" fill="rgba(0,0,0,0.48)" font-weight="700">
|
||
<text x="260" y="70" text-anchor="middle">查IP/端口/状态</text>
|
||
<text x="377" y="126" text-anchor="middle">错误→按材料</text>
|
||
<text x="260" y="156" text-anchor="middle">移除→重加</text>
|
||
<text x="143" y="216" text-anchor="middle">确认红点消失</text>
|
||
<text x="260" y="240" text-anchor="middle">写入 SOP/Skill</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 5: 自动化产出清单 -->
|
||
<div class="slide" id="slide-5" style="justify-content:center;">
|
||
<h2 style="margin-bottom: 26px;">Deliverables</h2>
|
||
<div class="row" style="align-items:center;">
|
||
<div class="glass-strong" style="flex:1; padding: 32px 38px;">
|
||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px;">
|
||
<span class="icon">🧰</span>
|
||
<span class="tag">可复用资产</span>
|
||
</div>
|
||
<div class="list">
|
||
<p>① 检测脚本：<span>time_machine_diskstation_auto.sh</span></p>
|
||
<p>② 排查文档：<span>Time_Machine_DiskStation_错误排查.md</span></p>
|
||
<p>③ Skill：<span>群晖NAS管理（含 Time Machine 小节）</span></p>
|
||
<p>④ 外网挂载：<span>mount_diskstation_1tb.sh + 参考资料</span></p>
|
||
<p>⑤ 复盘规则：<span>目标每句≤30字+必须含%</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="glass img-card" style="padding: 16px;">
|
||
<!-- 配图：工具箱 -->
|
||
<svg viewBox="0 0 420 420" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="g4" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#34C759" stop-opacity="0.12"/>
|
||
<stop offset="100%" stop-color="#0A84FF" stop-opacity="0.12"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect x="0" y="0" width="420" height="420" rx="18" fill="url(#g4)"/>
|
||
<g>
|
||
<rect x="76" y="160" width="268" height="168" rx="22" fill="rgba(255,255,255,0.78)" stroke="rgba(255,255,255,0.75)"/>
|
||
<rect x="130" y="126" width="160" height="60" rx="18" fill="rgba(255,255,255,0.78)" stroke="rgba(255,255,255,0.75)"/>
|
||
<rect x="152" y="144" width="116" height="24" rx="12" fill="rgba(0,0,0,0.07)"/>
|
||
<rect x="110" y="204" width="200" height="18" rx="9" fill="rgba(0,0,0,0.07)"/>
|
||
<rect x="110" y="234" width="200" height="18" rx="9" fill="rgba(0,0,0,0.07)"/>
|
||
<rect x="110" y="264" width="200" height="18" rx="9" fill="rgba(0,0,0,0.07)"/>
|
||
<text x="210" y="310" text-anchor="middle" font-size="14" font-weight="800" fill="rgba(0,0,0,0.55)">Scripts · Docs · Skills</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 6: 家里 NAS 关键参数 -->
|
||
<div class="slide" id="slide-6" style="justify-content:center;">
|
||
<h2 style="margin-bottom: 26px;">Home NAS Snapshot</h2>
|
||
<div class="row" style="align-items:center;">
|
||
<div class="glass-strong" style="flex:1; padding: 32px 38px;">
|
||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px;">
|
||
<span class="icon">🪙</span>
|
||
<span class="tag">资产摘要</span>
|
||
</div>
|
||
<div class="grid2">
|
||
<div class="metric"><div class="v">DS213j</div><div class="k">MODEL</div></div>
|
||
<div class="metric"><div class="v">armv7l</div><div class="k">ARCH</div></div>
|
||
<div class="metric"><div class="v">497MB</div><div class="k">RAM</div></div>
|
||
<div class="metric"><div class="v">5.4TB</div><div class="k">DISK</div></div>
|
||
</div>
|
||
<div class="glass" style="padding: 18px 22px; margin-top: 16px;">
|
||
<div class="small">开放端口：22 / 80 / 443 / 139 / 445 / 5000 / 5001；对外域名：opennas2.quwanzhi.com。</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass img-card" style="padding: 16px;">
|
||
<!-- 配图：指标卡 -->
|
||
<svg viewBox="0 0 420 420" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="g5" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#BF5AF2" stop-opacity="0.10"/>
|
||
<stop offset="100%" stop-color="#FF9F0A" stop-opacity="0.10"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<rect x="0" y="0" width="420" height="420" rx="18" fill="url(#g5)"/>
|
||
<g>
|
||
<rect x="62" y="86" width="296" height="248" rx="22" fill="rgba(255,255,255,0.78)" stroke="rgba(255,255,255,0.75)"/>
|
||
<text x="210" y="130" text-anchor="middle" font-size="16" font-weight="900" fill="rgba(0,0,0,0.60)">Home NAS</text>
|
||
<rect x="96" y="154" width="228" height="14" rx="7" fill="rgba(0,0,0,0.07)"/>
|
||
<rect x="96" y="182" width="228" height="14" rx="7" fill="rgba(0,0,0,0.07)"/>
|
||
<rect x="96" y="210" width="228" height="14" rx="7" fill="rgba(0,0,0,0.07)"/>
|
||
<rect x="96" y="238" width="228" height="14" rx="7" fill="rgba(0,0,0,0.07)"/>
|
||
<rect x="96" y="266" width="228" height="14" rx="7" fill="rgba(0,0,0,0.07)"/>
|
||
<text x="210" y="314" text-anchor="middle" font-size="13" font-weight="800" fill="rgba(0,0,0,0.52)">Time Machine / SMB / FRP</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 7: 下一步行动（用户可执行） -->
|
||
<div class="slide" id="slide-7" style="justify-content:center;">
|
||
<h2 style="margin-bottom: 26px;">Next Actions</h2>
|
||
<div class="row" style="align-items:center;">
|
||
<div class="glass-strong" style="flex:1; padding: 32px 38px;">
|
||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px;">
|
||
<span class="icon">▶️</span>
|
||
<span class="tag">按顺序执行</span>
|
||
</div>
|
||
<div class="list">
|
||
<p>① Time Machine：<span>移除“共享”→重新添加</span></p>
|
||
<p>② 外网挂载：<span>frpc 加 SMB 4452 → Finder ⌘K</span></p>
|
||
<p>③ 自动化：<span>遇到同类问题直接跑检测脚本</span></p>
|
||
<p>④ 复盘：<span>对话结尾统一按复盘块输出</span></p>
|
||
</div>
|
||
<div class="glass" style="padding: 18px 22px; margin-top: 16px;">
|
||
<div class="small">提示：Finder 复制文件会显示速率；侧栏固定：挂载后拖到「位置」。</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass img-card" style="padding: 16px;">
|
||
<!-- 配图：箭头与侧栏 -->
|
||
<svg viewBox="0 0 420 420" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="g6" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0%" stop-color="#0A84FF" stop-opacity="0.10"/>
|
||
<stop offset="100%" stop-color="#34C759" stop-opacity="0.10"/>
|
||
</linearGradient>
|
||
<marker id="arrow3" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto">
|
||
<path d="M0,0 L10,6 L0,12 Z" fill="rgba(0,0,0,0.35)"/>
|
||
</marker>
|
||
</defs>
|
||
<rect x="0" y="0" width="420" height="420" rx="18" fill="url(#g6)"/>
|
||
<g>
|
||
<rect x="64" y="86" width="292" height="248" rx="22" fill="rgba(255,255,255,0.78)" stroke="rgba(255,255,255,0.75)"/>
|
||
<rect x="86" y="110" width="86" height="200" rx="16" fill="rgba(0,0,0,0.05)"/>
|
||
<rect x="182" y="110" width="152" height="38" rx="14" fill="rgba(0,122,255,0.12)"/>
|
||
<text x="258" y="135" text-anchor="middle" font-size="12" font-weight="900" fill="rgba(0,0,0,0.55)">Finder 位置</text>
|
||
<rect x="182" y="162" width="152" height="38" rx="14" fill="rgba(52,199,89,0.12)"/>
|
||
<text x="258" y="187" text-anchor="middle" font-size="12" font-weight="900" fill="rgba(0,0,0,0.55)">DiskStation-1TB</text>
|
||
<path d="M120 306 C180 320, 240 320, 300 306" stroke="rgba(0,0,0,0.35)" stroke-width="2.4" fill="none" marker-end="url(#arrow3)"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 8: 结尾（对话→复用） -->
|
||
<div class="slide" id="slide-8" style="justify-content:center; align-items:center;">
|
||
<div class="glass-strong" style="padding: 46px 60px; width: 980px;">
|
||
<div style="display:flex; align-items:center; justify-content:space-between;">
|
||
<span class="icon">🏁</span>
|
||
<span class="tag">结尾</span>
|
||
</div>
|
||
<h1 class="text-dark" style="font-size: 44px; margin: 16px 0 10px;">把一次对话变成可复用系统</h1>
|
||
<p class="text-muted" style="font-size: 20px; font-weight: 600;">诊断 → 修复 → 验证 → 文档/Skill 沉淀</p>
|
||
<div class="glass" style="margin-top: 18px; padding: 18px 22px;">
|
||
<div class="small">PPT 用途：对外汇报、团队交接、下次直接照流程做，不再重复沟通成本。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|