lizhuoran/KnowledgeBase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 修复知识库和操作指引

Browse Source
This commit is contained in:
7IN0SAN9
2026-03-13 14:32:37 +08:00
parent bbe8e60646
commit 58f42de9df
88 changed files with 3387 additions and 2472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
public/guides/water-leak-alarm/step-1.html Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>步骤 1 - 确认报警位置</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
padding: 24px;
background: white;
color: #0f172a;
overflow-y: auto;
}
.step-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 16px;
color: #0f172a;
}
.step-image-container {
position: relative;
margin-bottom: 16px;
}
.step-image {
max-width: 100%;
height: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
display: block;
}
.annotation-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.annotation-box { stroke-width: 3; fill: none; }
.annotation-label { font-weight: bold; font-size: 16px; }
.annotation-arrow { stroke-width: 3; fill: none; }
.step-content {
font-size: 14px;
line-height: 1.6;
color: #475569;
margin-bottom: 24px;
}
.step-content p { margin-bottom: 12px; }
.warning-box {
background: #fef2f2;
border-left: 4px solid #ef4444;
padding: 12px;
margin-bottom: 16px;
border-radius: 4px;
}
.warning-box strong {
color: #dc2626;
display: block;
margin-bottom: 8px;
}
.warning-box p {
color: #991b1b;
font-size: 13px;
}
</style>
</head>
<body>
<div class="warning-box">
<strong>&#9888;&#65039; 紧急处理流程</strong>
<p>水泄漏报警触发后应立即按照以下步骤处理，防止设备损坏。如遇大面积漏水，请先关闭主水阀并通知值班负责人。</p>
</div>
<div class="step-title">步骤 1: 确认报警位置</div>
<div class="step-image-container">
<img src="images/eps-cabinet.jpg" alt="EPS 机柜" class="step-image"
onerror="this.style.display='none'">
<svg class="annotation-layer">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#ef4444" />
</marker>
</defs>
<rect class="annotation-box" x="30%" y="30%" width="35%" height="20%" stroke="#ef4444" />
<text class="annotation-label" x="31%" y="27%" fill="#ef4444">水泄漏检测模块</text>
<line class="annotation-arrow" x1="48%" y1="50%" x2="48%" y2="60%" stroke="#ef4444" marker-end="url(#arrowhead)" />
<text class="annotation-label" x="50%" y="65%" fill="#ef4444">查看编号</text>
</svg>
</div>
<div class="step-content">
<p>水泄漏报警已触发。首先需要确认漏水点的具体位置。</p>
<p>请查看设备保护系统（EPS）机柜上的水泄漏检测模块，记录显示的数字编号。</p>
</div>
</body>
</html>

94
public/guides/water-leak-alarm/step-2.html Normal file
View File

@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>步骤 2 - 搜索光学棚屋</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
padding: 24px;
background: white;
color: #0f172a;
overflow-y: auto;
}
.step-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 16px;
color: #0f172a;
}
.step-image-container {
position: relative;
margin-bottom: 16px;
}
.step-image {
max-width: 100%;
height: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
display: block;
}
.annotation-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.annotation-box { stroke-width: 3; fill: none; }
.annotation-label { font-weight: bold; font-size: 14px; }
.step-content {
font-size: 14px;
line-height: 1.6;
color: #475569;
margin-bottom: 24px;
}
.step-content p { margin-bottom: 12px; }
.step-content ul { margin-left: 24px; margin-top: 12px; }
.step-content li { margin-bottom: 8px; }
</style>
</head>
<body>
<div class="step-title">步骤 2: 搜索光学棚屋</div>
<div class="step-image-container">
<img src="images/optics-hutch-layout.jpg" alt="光学棚屋布局图" class="step-image"
onerror="this.style.display='none'">
<svg class="annotation-layer">
<rect class="annotation-box" x="15%" y="20%" width="20%" height="16%" stroke="#c4b5fd" />
<text class="annotation-label" x="16%" y="17%" fill="#7c3aed">1-10</text>
<rect class="annotation-box" x="42%" y="20%" width="20%" height="16%" stroke="#93c5fd" />
<text class="annotation-label" x="43%" y="17%" fill="#2563eb">11-20</text>
<rect class="annotation-box" x="68%" y="20%" width="20%" height="16%" stroke="#6ee7b7" />
<text class="annotation-label" x="69%" y="17%" fill="#059669">21-30</text>
</svg>
</div>
<div class="step-content">
<p>根据检测模块显示的编号，进入光学棚屋找到对应的水泄漏检测线缆。</p>
<p>线缆编号对应位置：</p>
<ul>
<li><strong>1-10</strong>：单色器区域</li>
<li><strong>11-20</strong>：聚焦镜区域</li>
<li><strong>21-30</strong>：实验站区域</li>
</ul>
</div>
</body>
</html>

109
public/guides/water-leak-alarm/step-3.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>步骤 3 - 定位并处理漏水点</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
padding: 24px;
background: white;
color: #0f172a;
overflow-y: auto;
}
.step-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 16px;
color: #0f172a;
}
.step-image-container {
position: relative;
margin-bottom: 16px;
}
.step-image {
max-width: 100%;
height: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
display: block;
}
.annotation-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.annotation-box { stroke-width: 3; fill: none; }
.annotation-label { font-weight: bold; font-size: 16px; }
.step-content {
font-size: 14px;
line-height: 1.6;
color: #475569;
margin-bottom: 24px;
}
.step-content p { margin-bottom: 12px; }
.step-content ol { margin-left: 24px; margin-top: 12px; }
.step-content li { margin-bottom: 8px; }
.warning-box {
background: #fef3c7;
border-left: 4px solid #f59e0b;
padding: 12px;
margin: 16px 0;
border-radius: 4px;
}
.warning-box strong {
color: #d97706;
display: block;
margin-bottom: 8px;
}
</style>
</head>
<body>
<div class="step-title">步骤 3: 定位并处理漏水点</div>
<div class="step-image-container">
<img src="images/leak-detection-cable.jpg" alt="漏水检测线缆" class="step-image"
onerror="this.style.display='none'">
<svg class="annotation-layer">
<rect class="annotation-box" x="25%" y="40%" width="50%" height="30%" stroke="#f59e0b" />
<text class="annotation-label" x="26%" y="37%" fill="#f59e0b">检查此区域</text>
</svg>
</div>
<div class="step-content">
<p>找到对应编号的线缆后，沿线缆检查漏水点：</p>
<ol>
<li>查看线缆周围是否有水渍</li>
<li>检查附近的冷却水管接头</li>
<li>用干布擦干水渍</li>
<li>如果是管道漏水，需要关闭该区域冷却水阀门并通知维护人员</li>
</ol>
</div>
<div class="warning-box">
<strong>&#9888;&#65039; 注意</strong>
如果是管道漏水，应立即关闭该区域冷却水阀门，并联系维护人员处理。
</div>
</body>
</html>

108
public/guides/water-leak-alarm/step-4.html Normal file
View File

@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>步骤 4 - 复位报警</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
padding: 24px;
background: white;
color: #0f172a;
overflow-y: auto;
}
.step-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 16px;
color: #0f172a;
}
.step-image-container {
position: relative;
margin-bottom: 16px;
}
.step-image {
max-width: 100%;
height: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
display: block;
}
.annotation-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.annotation-box { stroke-width: 3; fill: none; }
.annotation-label { font-weight: bold; font-size: 16px; }
.step-content {
font-size: 14px;
line-height: 1.6;
color: #475569;
margin-bottom: 24px;
}
.step-content p { margin-bottom: 12px; }
.step-content ol { margin-left: 24px; margin-top: 12px; }
.step-content li { margin-bottom: 8px; }
.warning-box {
background: #fef3c7;
border-left: 4px solid #f59e0b;
padding: 12px;
margin: 16px 0;
border-radius: 4px;
}
.warning-box strong {
color: #d97706;
display: block;
margin-bottom: 8px;
}
</style>
</head>
<body>
<div class="step-title">步骤 4: 复位报警</div>
<div class="step-image-container">
<img src="images/eps-reset.jpg" alt="EPS 复位面板" class="step-image"
onerror="this.style.display='none'">
<svg class="annotation-layer">
<rect class="annotation-box" x="40%" y="35%" width="18%" height="12%" stroke="#10b981" />
<text class="annotation-label" x="41%" y="32%" fill="#10b981">复位按钮</text>
</svg>
</div>
<div class="step-content">
<p>处理完漏水点后，返回 EPS 机柜：</p>
<ol>
<li>确认水泄漏检测模块指示灯已熄灭</li>
<li>按下"复位"按钮</li>
<li>观察系统是否恢复正常</li>
</ol>
</div>
<div class="warning-box">
<strong>&#9888;&#65039; 注意</strong>
如果报警持续，说明漏水未完全处理，需要重新检查。
</div>
</body>
</html>

71
public/guides/water-leak-alarm/step-5.html Normal file
View File

@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>步骤 5 - 完成</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%;
height: 100%;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
padding: 24px;
background: white;
color: #0f172a;
overflow-y: auto;
}
.step-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 16px;
color: #0f172a;
}
.success-box {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 4px solid #22c55e;
border-radius: 8px;
padding: 20px;
margin-bottom: 16px;
}
.success-box .check {
font-size: 20px;
color: #16a34a;
font-weight: bold;
margin-bottom: 12px;
}
.step-content {
font-size: 14px;
line-height: 1.6;
color: #475569;
}
.step-content ul { margin-left: 24px; margin-top: 12px; }
.step-content li { margin-bottom: 8px; }
</style>
</head>
<body>
<div class="step-title">步骤 5: 完成</div>
<div class="success-box">
<div class="check">&#10003; 水泄漏报警已成功处理！</div>
<div class="step-content">
<p>后续建议：</p>
<ul>
<li>记录漏水位置和处理方法</li>
<li>如果是管道问题，提交维护工单</li>
<li>增加该区域的巡检频率</li>
</ul>
</div>
</div>
</body>
</html>