1201 lines
49 KiB
HTML
1201 lines
49 KiB
HTML
<!-- Generated by Trae Work -->
|
||
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Maibu Satabot V2 — 用户使用手册</title>
|
||
|
||
<style>
|
||
@font-face {
|
||
font-family: 'Outfit';
|
||
src: url('./_shared/fonts/Outfit-Regular.ttf') format('truetype');
|
||
font-weight: 400;
|
||
}
|
||
@font-face {
|
||
font-family: 'Outfit';
|
||
src: url('./_shared/fonts/Outfit-Bold.ttf') format('truetype');
|
||
font-weight: 700;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
:root {
|
||
--bg: #f8f9fc;
|
||
--bg2: #ffffff;
|
||
--bg3: #f0f2f8;
|
||
--ink: #1a1d2e;
|
||
--muted: #6b7187;
|
||
--rule: #e2e5ee;
|
||
--accent: #3b6ef5;
|
||
--accent2: #6c4cd6;
|
||
--accent-light: rgba(59, 110, 245, 0.08);
|
||
--accent2-light: rgba(108, 76, 214, 0.08);
|
||
--success: #22a774;
|
||
--warning: #f5a623;
|
||
--danger: #e5484d;
|
||
--font: 'Outfit', -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
|
||
--font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
|
||
--max: 960px;
|
||
--radius: 14px;
|
||
--radius-sm: 8px;
|
||
--shadow: 0 2px 12px rgba(26, 29, 46, 0.06);
|
||
--shadow-lg: 0 8px 32px rgba(26, 29, 46, 0.10);
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { font-size: 16px; scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: var(--font);
|
||
color: var(--ink);
|
||
background: var(--bg);
|
||
background-image:
|
||
radial-gradient(ellipse at 15% 0%, rgba(59, 110, 245, 0.07) 0%, transparent 50%),
|
||
radial-gradient(ellipse at 85% 100%, rgba(108, 76, 214, 0.06) 0%, transparent 50%);
|
||
line-height: 1.75;
|
||
padding: 0;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
article.page {
|
||
max-width: var(--max);
|
||
margin: 0 auto;
|
||
padding: 0 1.25rem 4rem;
|
||
}
|
||
|
||
/* === Cover === */
|
||
.cover {
|
||
text-align: center;
|
||
padding: 4.5rem 1.25rem 3rem;
|
||
background: linear-gradient(135deg, rgba(59,110,245,0.05), rgba(108,76,214,0.05));
|
||
border-radius: 0 0 24px 24px;
|
||
margin-bottom: 3rem;
|
||
}
|
||
.cover .logo {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: 18px;
|
||
background: linear-gradient(135deg, var(--accent), var(--accent2));
|
||
box-shadow: 0 8px 24px rgba(59, 110, 245, 0.25);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.cover .logo svg { width: 38px; height: 38px; fill: #fff; }
|
||
.cover h1 {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
.cover .subtitle {
|
||
font-size: 1.05rem;
|
||
color: var(--muted);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.cover .meta {
|
||
display: inline-flex;
|
||
gap: 1.5rem;
|
||
font-size: 0.82rem;
|
||
color: var(--muted);
|
||
}
|
||
.cover .meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
|
||
.cover .meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
|
||
|
||
/* === TOC === */
|
||
.toc {
|
||
background: var(--bg2);
|
||
border: 1px solid var(--rule);
|
||
border-radius: var(--radius);
|
||
padding: 1.5rem 1.75rem;
|
||
margin-bottom: 3rem;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.toc h2 {
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--muted);
|
||
margin-bottom: 1rem;
|
||
}
|
||
.toc ol { list-style: none; counter-reset: toc-counter; }
|
||
.toc li {
|
||
counter-increment: toc-counter;
|
||
margin-bottom: 0.45rem;
|
||
}
|
||
.toc li::before {
|
||
content: counter(toc-counter, decimal-leading-zero);
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
margin-right: 0.6rem;
|
||
}
|
||
.toc a {
|
||
text-decoration: none;
|
||
color: var(--ink);
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
}
|
||
.toc a:hover { color: var(--accent); }
|
||
|
||
/* === Section === */
|
||
section { margin-bottom: 3.5rem; scroll-margin-top: 1rem; }
|
||
h2.section-title {
|
||
font-size: 1.6rem;
|
||
font-weight: 700;
|
||
letter-spacing: -0.01em;
|
||
margin-bottom: 0.4rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
}
|
||
h2.section-title .num {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 10px;
|
||
background: linear-gradient(135deg, var(--accent), var(--accent2));
|
||
color: #fff;
|
||
font-size: 0.95rem;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
}
|
||
.section-desc {
|
||
color: var(--muted);
|
||
font-size: 0.92rem;
|
||
margin-bottom: 1.5rem;
|
||
padding-left: 48px;
|
||
}
|
||
h3 {
|
||
font-size: 1.12rem;
|
||
font-weight: 700;
|
||
margin-top: 2rem;
|
||
margin-bottom: 0.75rem;
|
||
color: var(--ink);
|
||
}
|
||
h4 {
|
||
font-size: 0.98rem;
|
||
font-weight: 700;
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--accent);
|
||
}
|
||
p { margin-bottom: 0.85rem; }
|
||
|
||
/* === Cards === */
|
||
.card {
|
||
background: var(--bg2);
|
||
border: 1px solid var(--rule);
|
||
border-radius: var(--radius);
|
||
padding: 1.5rem;
|
||
margin: 1.25rem 0;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.card-title {
|
||
font-weight: 700;
|
||
font-size: 1.02rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* === Feature grid === */
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1rem;
|
||
margin: 1.25rem 0;
|
||
}
|
||
.feature-card {
|
||
background: var(--bg2);
|
||
border: 1px solid var(--rule);
|
||
border-radius: var(--radius-sm);
|
||
padding: 1.1rem 1.25rem;
|
||
transition: transform 0.15s, box-shadow 0.15s;
|
||
}
|
||
.feature-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
.feature-card .icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 9px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
.feature-card .icon svg { width: 20px; height: 20px; }
|
||
.feature-card h4 { margin-top: 0; margin-bottom: 0.35rem; }
|
||
.feature-card p { font-size: 0.86rem; color: var(--muted); margin-bottom: 0; line-height: 1.55; }
|
||
|
||
/* === Steps === */
|
||
.steps {
|
||
list-style: none;
|
||
counter-reset: step-counter;
|
||
padding: 0;
|
||
}
|
||
.steps li {
|
||
counter-increment: step-counter;
|
||
position: relative;
|
||
padding-left: 2.8rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.steps li::before {
|
||
content: counter(step-counter);
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
font-size: 0.82rem;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.steps li strong { font-weight: 600; }
|
||
|
||
/* === Callout === */
|
||
.callout {
|
||
background: var(--accent-light);
|
||
border-left: 3px solid var(--accent);
|
||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||
padding: 0.85rem 1.1rem;
|
||
margin: 1.25rem 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
.callout strong { color: var(--accent); }
|
||
.callout.warn {
|
||
background: rgba(245, 166, 35, 0.08);
|
||
border-left-color: var(--warning);
|
||
}
|
||
.callout.warn strong { color: var(--warning); }
|
||
.callout.danger {
|
||
background: rgba(229, 72, 77, 0.08);
|
||
border-left-color: var(--danger);
|
||
}
|
||
.callout.danger strong { color: var(--danger); }
|
||
|
||
/* === Table === */
|
||
.table-wrap {
|
||
overflow-x: auto;
|
||
overflow-y: auto;
|
||
max-height: 600px;
|
||
border: 1px solid var(--rule);
|
||
border-radius: var(--radius-sm);
|
||
margin: 1.25rem 0;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.88rem;
|
||
min-width: 500px;
|
||
}
|
||
thead th {
|
||
background: var(--bg3);
|
||
text-align: left;
|
||
padding: 0.7rem 1rem;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
border-bottom: 1px solid var(--rule);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
tbody td {
|
||
padding: 0.65rem 1rem;
|
||
border-bottom: 1px solid var(--rule);
|
||
}
|
||
tbody tr:last-child td { border-bottom: none; }
|
||
tbody tr:hover { background: var(--accent-light); }
|
||
|
||
/* === Tab bar mock === */
|
||
.tab-mock {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
background: var(--bg2);
|
||
border: 1px solid var(--rule);
|
||
border-radius: 12px;
|
||
padding: 0.6rem;
|
||
margin: 1.25rem 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
.tab-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
padding: 0.5rem 0.8rem;
|
||
border-radius: 8px;
|
||
font-size: 0.78rem;
|
||
color: var(--muted);
|
||
transition: all 0.15s;
|
||
}
|
||
.tab-item.active {
|
||
background: var(--accent-light);
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
.tab-item .tab-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.tab-item .tab-icon svg { width: 18px; height: 18px; }
|
||
|
||
/* === Diagram (flowchart) === */
|
||
.flow {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin: 1.5rem 0;
|
||
}
|
||
.flow-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
.flow-node {
|
||
background: var(--bg2);
|
||
border: 1.5px solid var(--accent);
|
||
border-radius: 10px;
|
||
padding: 0.5rem 1rem;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
}
|
||
.flow-arrow {
|
||
font-size: 1.2rem;
|
||
color: var(--muted);
|
||
}
|
||
.flow-arrow.down { transform: rotate(90deg); }
|
||
|
||
/* === Divider === */
|
||
.divider {
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, var(--rule), transparent);
|
||
margin: 2.5rem 0;
|
||
}
|
||
|
||
/* === Badge === */
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
padding: 0.15rem 0.5rem;
|
||
border-radius: 5px;
|
||
}
|
||
.badge.new { background: rgba(34, 167, 116, 0.1); color: var(--success); }
|
||
.badge.core { background: var(--accent-light); color: var(--accent); }
|
||
|
||
mark.key { background: none; color: var(--accent); font-weight: 600; }
|
||
|
||
/* === Footer === */
|
||
footer {
|
||
margin-top: 3rem;
|
||
padding-top: 2rem;
|
||
border-top: 1px solid var(--rule);
|
||
text-align: center;
|
||
color: var(--muted);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* === Responsive === */
|
||
@media (max-width: 640px) {
|
||
.feature-grid { grid-template-columns: 1fr; }
|
||
.cover { padding: 3rem 1rem 2rem; }
|
||
.cover h1 { font-size: 1.5rem; }
|
||
.section-desc { padding-left: 0; }
|
||
h2.section-title { font-size: 1.3rem; }
|
||
.tab-mock { gap: 0.25rem; }
|
||
.tab-item { padding: 0.4rem 0.5rem; font-size: 0.72rem; }
|
||
}
|
||
|
||
@media print {
|
||
body { background: #fff; }
|
||
.cover { background: none; border-bottom: 1px solid var(--rule); }
|
||
.feature-card:hover { transform: none; box-shadow: none; }
|
||
section { page-break-inside: avoid; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<article class="page">
|
||
|
||
<!-- ========== COVER ========== -->
|
||
<div class="cover">
|
||
<div class="logo">
|
||
<svg viewBox="0 0 24 24"><path d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.18L19.5 8 12 11.82 4.5 8 12 4.18zM4 9.7l7 3.5v6.1l-7-3.5V9.7zm9 9.6v-6.1l7-3.5v6.1l-7 3.5z"/></svg>
|
||
</div>
|
||
<h1>Maibu Satabot V2</h1>
|
||
<p class="subtitle">智能机器人与无人机管控平台 — 用户使用手册</p>
|
||
<div class="meta">
|
||
<span><span class="dot"></span> 版本 1.0.0</span>
|
||
<span><span class="dot"></span> 适用平台：Android / iOS</span>
|
||
<span><span class="dot"></span> 更新日期：2026-09</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== TOC ========== -->
|
||
<nav class="toc">
|
||
<h2>目录</h2>
|
||
<ol>
|
||
<li><a href="#overview">应用概览</a></li>
|
||
<li><a href="#account">账号与登录</a></li>
|
||
<li><a href="#home">首页看板</a></li>
|
||
<li><a href="#devices">设备管理</a></li>
|
||
<li><a href="#remote">远程控制</a></li>
|
||
<li><a href="#route-plan">路径规划</a></li>
|
||
<li><a href="#alarm">告警中心</a></li>
|
||
<li><a href="#workorder">工单管理</a></li>
|
||
<li><a href="#report">问题上报</a></li>
|
||
<li><a href="#ai">AI 助手</a></li>
|
||
<li><a href="#profile">个人中心</a></li>
|
||
<li><a href="#update">应用更新</a></li>
|
||
<li><a href="#tab-settings">底部导航自定义</a></li>
|
||
<li><a href="#faq">常见问题</a></li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<!-- ========== 1. OVERVIEW ========== -->
|
||
<section id="overview">
|
||
<h2 class="section-title"><span class="num">1</span> 应用概览</h2>
|
||
<p class="section-desc">了解 Satabot V2 的核心定位与整体功能架构</p>
|
||
|
||
<p>Maibu Satabot V2 是一款面向光伏电站、清洁除草等工业场景的<mark class="key">智能机器人与无人机管控平台</mark>。通过手机 App，您可以完成设备监控、远程操控、路径规划、告警处理、工单流转、问题上报等全流程操作，实现一人多机的高效运维。</p>
|
||
|
||
<div class="card">
|
||
<div class="card-title">核心能力一览</div>
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<div class="icon" style="background: var(--accent-light);">
|
||
<svg viewBox="0 0 24 24" fill="var(--accent)"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
|
||
</div>
|
||
<h4>首页看板</h4>
|
||
<p>电站概览、发电量统计、工单摘要、快捷入口一屏展示</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="icon" style="background: rgba(108,76,214,0.08);">
|
||
<svg viewBox="0 0 24 24" fill="var(--accent2)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||
</div>
|
||
<h4>设备管理</h4>
|
||
<p>机器人与无人机列表、实时状态、绑定/解绑、任务管理</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="icon" style="background: var(--accent-light);">
|
||
<svg viewBox="0 0 24 24" fill="var(--accent)"><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7s2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>
|
||
</div>
|
||
<h4>远程控制</h4>
|
||
<p>双摇杆操控、WebRTC 实时画面、急停、权限管理</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="icon" style="background: rgba(108,76,214,0.08);">
|
||
<svg viewBox="0 0 24 24" fill="var(--accent2)"><path d="M20 6h-2.18A2.99 2.99 0 0 0 15 4a2.99 2.99 0 0 0-2.82 2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"/></svg>
|
||
</div>
|
||
<h4>告警与工单</h4>
|
||
<p>告警查看与 AI 诊断、工单流转（派发→到场→处理→回执）</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>底部导航栏</h3>
|
||
<p>App 底部导航栏默认提供以下页面入口，您可以在「个人中心 → 底部导航设置」中自定义显示哪些标签页（详见第 13 节）。</p>
|
||
|
||
<div class="tab-mock">
|
||
<div class="tab-item active">
|
||
<div class="tab-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg></div>
|
||
首页
|
||
</div>
|
||
<div class="tab-item">
|
||
<div class="tab-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v2h14v-2H4V6zm18 0h-8v11h8V6z"/></svg></div>
|
||
设备
|
||
</div>
|
||
<div class="tab-item">
|
||
<div class="tab-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 1 21h22L12 2z"/></svg></div>
|
||
告警
|
||
</div>
|
||
<div class="tab-item">
|
||
<div class="tab-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg></div>
|
||
工单
|
||
</div>
|
||
<div class="tab-item">
|
||
<div class="tab-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg></div>
|
||
上报
|
||
</div>
|
||
<div class="tab-item">
|
||
<div class="tab-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg></div>
|
||
我的
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout">
|
||
<strong>多语言与主题：</strong>App 支持中文和英文两种语言，以及浅色/深色两种主题模式。可在「我的 → 系统设置」中切换。
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 2. ACCOUNT ========== -->
|
||
<section id="account">
|
||
<h2 class="section-title"><span class="num">2</span> 账号与登录</h2>
|
||
<p class="section-desc">注册、登录、密码管理及安全机制</p>
|
||
|
||
<h3>2.1 登录</h3>
|
||
<ol class="steps">
|
||
<li>打开 App，进入登录页面。</li>
|
||
<li>输入<strong>用户名</strong>和<strong>密码</strong>。</li>
|
||
<li>勾选底部的「用户协议」复选框。</li>
|
||
<li>点击「登录」按钮。登录成功后自动跳转至首页。</li>
|
||
</ol>
|
||
<div class="callout warn">
|
||
<strong>提示：</strong>如果登录失败，页面会显示失败原因提示。请确认用户名和密码正确，以及网络连接正常。
|
||
</div>
|
||
|
||
<h3>2.2 注册</h3>
|
||
<ol class="steps">
|
||
<li>在登录页面点击「注册」链接，进入注册页面。</li>
|
||
<li>填写用户名、密码等必要信息。</li>
|
||
<li>提交后即可使用新账号登录。</li>
|
||
</ol>
|
||
|
||
<h3>2.3 修改密码</h3>
|
||
<p>登录后，可在「我的 → 个人信息 → 修改密码」中更新密码。需要输入旧密码和新密码进行验证。</p>
|
||
|
||
<h3>2.4 会话安全机制</h3>
|
||
<div class="card">
|
||
<p>App 采用了<strong>会话续期与安全保护</strong>机制，保障您的账号安全：</p>
|
||
<ul style="padding-left: 1.2rem; margin-top: 0.5rem;">
|
||
<li><strong>自动续期：</strong>App 在前台运行期间会自动维持会话，无需重复登录。</li>
|
||
<li><strong>后台保护：</strong>App 进入后台时记录会话状态。恢复时验证会话一致性，防止被异常中断后误操作。</li>
|
||
<li><strong>异地登录检测：</strong>检测到其他设备登录同一账号时，当前设备可能被强制退出。在进行远程控制或路径规划等关键操作时，App 会自动进入<mark class="key">安全模式</mark>，防止操作被中断。</li>
|
||
<li><strong>断线重连：</strong>网络恢复后，App 会自动重连 TCP 服务器并恢复设备状态推送。</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 3. HOME ========== -->
|
||
<section id="home">
|
||
<h2 class="section-title"><span class="num">3</span> 首页看板</h2>
|
||
<p class="section-desc">一屏掌握场站运行概况、发电量、工单与设备状态</p>
|
||
|
||
<p>首页是登录后的主页面，集中展示当前选中场站的核心运行数据和快捷操作入口。</p>
|
||
|
||
<h3>3.1 场站选择器</h3>
|
||
<p>页面顶部提供<strong>场站选择器</strong>。点击可切换不同场站，所有页面（首页、告警、工单、设备列表）的数据都会根据当前选中的场站自动刷新。</p>
|
||
|
||
<h3>3.2 看板内容</h3>
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<div class="icon" style="background: var(--accent-light);">
|
||
<svg viewBox="0 0 24 24" fill="var(--accent)"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03L21.7 4H5.21l-.94-2H1zm6 16c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2z"/></svg>
|
||
</div>
|
||
<h4>电站概览卡片</h4>
|
||
<p>展示当前场站的基本信息和运行概况</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="icon" style="background: rgba(108,76,214,0.08);">
|
||
<svg viewBox="0 0 24 24" fill="var(--accent2)"><path d="M7 2v11h3v9l6-12h-3l3-8z"/></svg>
|
||
</div>
|
||
<h4>发电量卡片</h4>
|
||
<p>显示当日/累计发电量，含趋势图表</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="icon" style="background: var(--accent-light);">
|
||
<svg viewBox="0 0 24 24" fill="var(--accent)"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
|
||
</div>
|
||
<h4>统计网格</h4>
|
||
<p>设备总数、在线数、告警数等关键指标</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="icon" style="background: rgba(108,76,214,0.08);">
|
||
<svg viewBox="0 0 24 24" fill="var(--accent2)"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2z"/></svg>
|
||
</div>
|
||
<h4>工单摘要卡片</h4>
|
||
<p>待处理工单数量与状态概览</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="icon" style="background: var(--accent-light);">
|
||
<svg viewBox="0 0 24 24" fill="var(--accent)"><path d="M13 3a9 9 0 0 0-9 9H1l4 4 4-4H6a7 7 0 1 1 7 7v2a9 9 0 0 0 0-18z"/></svg>
|
||
</div>
|
||
<h4>快捷入口</h4>
|
||
<p>快速跳转到远程控制、路径规划等常用功能</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="icon" style="background: rgba(108,76,214,0.08);">
|
||
<svg viewBox="0 0 24 24" fill="var(--accent2)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
|
||
</div>
|
||
<h4>连接状态指示器</h4>
|
||
<p>显示 TCP 服务器连接状态（在线/断开）</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout">
|
||
<strong>使用技巧：</strong>下拉刷新可重新加载首页所有数据。切换场站后，所有页面数据会自动同步更新。
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 4. DEVICES ========== -->
|
||
<section id="devices">
|
||
<h2 class="section-title"><span class="num">4</span> 设备管理</h2>
|
||
<p class="section-desc">机器人与无人机的列表、状态监控、绑定及任务管理</p>
|
||
|
||
<p>点击底部导航栏的「设备」标签进入设备管理页面。设备分为两大类：<mark class="key">清洁除草机器人</mark>和<mark class="key">无人机及机场</mark>。</p>
|
||
|
||
<h3>4.1 机器人管理</h3>
|
||
|
||
<h4>机器人列表</h4>
|
||
<p>页面展示当前场站下所有机器人的列表，包含：</p>
|
||
<ul style="padding-left: 1.2rem; margin-bottom: 0.85rem;">
|
||
<li><strong>统计卡片：</strong>机器人总数、在线数、作业中数量等</li>
|
||
<li><strong>快捷操作：</strong>快速进入远程控制、路径规划等</li>
|
||
<li><strong>当前任务：</strong>展示正在执行的作业任务信息</li>
|
||
<li><strong>机器人卡片：</strong>每台机器人的别名、序列号、在线状态、电量、当前状态</li>
|
||
</ul>
|
||
<p>支持下拉刷新列表。点击某台机器人可进入<strong>机器人控制详情页</strong>。</p>
|
||
|
||
<h4>机器人控制详情页</h4>
|
||
<div class="card">
|
||
<p>进入机器人详情页后，您可以查看完整的设备信息并进行操作：</p>
|
||
<ul style="padding-left: 1.2rem; margin-top: 0.5rem;">
|
||
<li><strong>头部信息卡：</strong>机器人别名、序列号</li>
|
||
<li><strong>状态栏：</strong>实时运行状态、电量、信号等</li>
|
||
<li><strong>控制面板：</strong>发送控制指令（启动、停止、暂停等）</li>
|
||
<li><strong>任务信息：</strong>当前关联的任务详情</li>
|
||
<li><strong>操作按钮：</strong>远程控制、路径规划等快捷入口</li>
|
||
</ul>
|
||
<p style="margin-top: 0.75rem;">退出详情页时，App 会自动释放该设备的远程控制权限。</p>
|
||
</div>
|
||
|
||
<h4>机器人任务管理</h4>
|
||
<p>在机器人列表页可进入「任务管理」页面，进行作业任务的创建、查看和管理：</p>
|
||
<ol class="steps">
|
||
<li>点击机器人列表中的任务入口。</li>
|
||
<li>查看已有任务列表或创建新任务。</li>
|
||
<li>可对任务执行<strong>暂停</strong>、<strong>恢复</strong>、<strong>取消</strong>等操作。</li>
|
||
<li>可查看任务执行记录和工作面积参数。</li>
|
||
</ol>
|
||
|
||
<h3>4.2 无人机与机场管理</h3>
|
||
|
||
<h4>无人机机场列表</h4>
|
||
<p>展示当前场站下的所有无人机机场（机巢），包含机场名称、网关序列号、在线状态等。点击进入<strong>机场详情页</strong>。</p>
|
||
|
||
<h4>机场详情页</h4>
|
||
<div class="card">
|
||
<p>机场详情页提供完整的无人机和机巢信息：</p>
|
||
<ul style="padding-left: 1.2rem; margin-top: 0.5rem;">
|
||
<li><strong>机场 OSD 状态卡：</strong>实时显示机巢的温湿度、充电状态、舱门状态等</li>
|
||
<li><strong>无人机 OSD 状态卡：</strong>无人机的电量、GPS 信号、飞行状态等</li>
|
||
<li><strong>任务控制入口：</strong>进入无人机任务与航线控制页面</li>
|
||
<li><strong>监控入口：</strong>进入无人机实时监控页面</li>
|
||
<li><strong>视频入口：</strong>进入无人机视频控制页面</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h4>无人机任务与航线控制</h4>
|
||
<p>在任务控制页面可以管理无人机的飞行任务：</p>
|
||
<ul style="padding-left: 1.2rem; margin-bottom: 0.85rem;">
|
||
<li><strong>查看任务详情：</strong>航线规划、航点信息、飞行参数</li>
|
||
<li><strong>任务操作：</strong>暂停任务、恢复任务、一键返航</li>
|
||
<li><strong>实时状态：</strong>当前飞行高度、速度、航向、电量</li>
|
||
</ul>
|
||
|
||
<h4>无人机实时监控</h4>
|
||
<p>监控页面展示无人机的实时遥测数据，包括位置坐标、飞行参数、传感器状态等。</p>
|
||
|
||
<h4>无人机视频控制</h4>
|
||
<p>视频控制页面提供无人机摄像头的实时图传画面，支持镜头参数调整。</p>
|
||
|
||
<h3>4.3 设备绑定与解绑</h3>
|
||
<h4>扫描绑定设备</h4>
|
||
<ol class="steps">
|
||
<li>在设备列表页点击「添加设备」或扫描图标。</li>
|
||
<li>使用 App 内置的<strong>二维码扫描器</strong>扫描设备上的二维码。</li>
|
||
<li>确认设备信息后完成绑定。绑定后设备会出现在您的设备列表中。</li>
|
||
</ol>
|
||
|
||
<h4>蓝牙配对</h4>
|
||
<p>部分设备支持通过<strong>蓝牙扫描</strong>进行配对。在绑定设备页面选择蓝牙扫描，App 会自动搜索附近的可用设备。</p>
|
||
|
||
<h4>解绑设备</h4>
|
||
<p>在设备详情或设置中可以选择「解绑设备」，解绑后该设备不再出现在您的列表中。</p>
|
||
|
||
<div class="callout warn">
|
||
<strong>注意：</strong>解绑设备前请确保设备没有正在执行的任务，否则可能导致任务中断。
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 5. REMOTE CONTROL ========== -->
|
||
<section id="remote">
|
||
<h2 class="section-title"><span class="num">5</span> 远程控制</h2>
|
||
<p class="section-desc">通过手机实时操控机器人，含双摇杆、视频图传与急停</p>
|
||
|
||
<p>远程控制页面提供<mark class="key">沉浸式的实时操控体验</mark>，支持横屏全屏操作。可从首页快捷入口或机器人详情页进入。</p>
|
||
|
||
<h3>5.1 页面布局</h3>
|
||
<div class="card">
|
||
<div class="card-title">控制界面分区</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 30%;">区域</th>
|
||
<th>功能说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>顶部状态栏</strong></td>
|
||
<td>显示设备名称、连接状态、电量、信号强度、控制权限状态</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>视频画面</strong></td>
|
||
<td>WebRTC 实时图传，显示机器人摄像头画面，占据屏幕主要区域</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>左侧摇杆</strong></td>
|
||
<td>控制机器人前进/后退及转向方向</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>右侧摇杆</strong></td>
|
||
<td>控制机器人附加功能（如刷盘升降等）</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>中央控制区</strong></td>
|
||
<td>功能切换、模式选择等操作按钮</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>急停按钮</strong></td>
|
||
<td>红色醒目按钮，紧急情况下立即停止机器人一切动作</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h3>5.2 使用步骤</h3>
|
||
<ol class="steps">
|
||
<li>确保目标设备已选中并在线（在首页或设备列表中选择设备）。</li>
|
||
<li>进入远程控制页面，App 自动锁定为<strong>横屏模式</strong>。</li>
|
||
<li>等待 WebRTC 视频流连接成功，画面开始实时显示。</li>
|
||
<li>如需获取控制权限，App 会弹出<strong>权限请求弹窗</strong>。点击确认后获得控制权。</li>
|
||
<li>使用左右摇杆操控机器人。画面会实时反馈机器人视角。</li>
|
||
<li>遇到紧急情况，点击<strong>急停按钮</strong>立即停止所有动作。</li>
|
||
</ol>
|
||
|
||
<h3>5.3 控制权限机制</h3>
|
||
<div class="callout">
|
||
<strong>权限说明：</strong>同一台设备同一时间只能有一个用户拥有控制权限。当您请求权限时，如果设备被其他人占用，需要等待对方释放权限后才能获取。
|
||
</div>
|
||
|
||
<div class="callout danger">
|
||
<strong>安全模式：</strong>进入远程控制页面后，App 会自动开启安全模式，防止异地登录推送等操作中断您的控制。退出页面后安全模式会延时 90 秒关闭。
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 6. ROUTE PLAN ========== -->
|
||
<section id="route-plan">
|
||
<h2 class="section-title"><span class="num">6</span> 路径规划</h2>
|
||
<p class="section-desc">在地图上为机器人规划作业路径</p>
|
||
|
||
<p>路径规划页面提供基于地图的可视化路径规划工具，为机器人生成作业路线。可从首页快捷入口或机器人详情页进入。</p>
|
||
|
||
<h3>使用流程</h3>
|
||
<div class="flow">
|
||
<div class="flow-row">
|
||
<div class="flow-node">选择设备</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-node">地图选点</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-node">生成路径</div>
|
||
</div>
|
||
<span class="flow-arrow down">→</span>
|
||
<div class="flow-row">
|
||
<div class="flow-node">参数调整</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-node">下发任务</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ol class="steps">
|
||
<li><strong>选择设备：</strong>进入路径规划页面时，确保已选中目标设备。未选择设备时会提示「请先选择设备」。</li>
|
||
<li><strong>地图操作：</strong>在地图上查看设备当前位置，通过缩放和拖动浏览作业区域。地图支持多种图层切换。</li>
|
||
<li><strong>设定起点和作业区域：</strong>在地图上标注起点和作业区域的边界。</li>
|
||
<li><strong>生成路径：</strong>系统根据作业区域自动生成路径规划方案。</li>
|
||
<li><strong>调整参数：</strong>可调整作业宽度、重叠率等参数，重新生成路径。</li>
|
||
<li><strong>下发任务：</strong>确认路径无误后，将路径下发给机器人执行。</li>
|
||
</ol>
|
||
|
||
<div class="callout warn">
|
||
<strong>注意：</strong>路径规划页面同样会启用安全模式，防止操作被打断。请确保设备在线且 GPS 信号良好。
|
||
</div>
|
||
|
||
<h3>地图功能</h3>
|
||
<ul style="padding-left: 1.2rem; margin-bottom: 0.85rem;">
|
||
<li><strong>设备位置标定：</strong>实时显示机器人当前位置和朝向</li>
|
||
<li><strong>航向指针：</strong>地图上的箭头指示机器人当前朝向</li>
|
||
<li><strong>轨迹回放：</strong>查看机器人的历史作业轨迹</li>
|
||
<li><strong>坐标系统：</strong>全项目使用 WGS84 坐标系统</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 7. ALARM ========== -->
|
||
<section id="alarm">
|
||
<h2 class="section-title"><span class="num">7</span> 告警中心</h2>
|
||
<p class="section-desc">查看告警、AI 诊断、派发工单与告警处理</p>
|
||
|
||
<p>告警中心集中展示当前场站的所有告警信息，支持分类查看、详情诊断和工单派发。</p>
|
||
|
||
<h3>7.1 告警列表</h3>
|
||
<ul style="padding-left: 1.2rem; margin-bottom: 0.85rem;">
|
||
<li><strong>告警数量卡片：</strong>顶部展示各等级告警的统计数量</li>
|
||
<li><strong>分类标签栏：</strong>按告警状态分类筛选（待处理、处理中、已处理等）</li>
|
||
<li><strong>告警趋势图：</strong>展示告警数量的变化趋势</li>
|
||
<li><strong>告警列表：</strong>支持上拉加载更多，每条告警显示等级、设备、时间、摘要</li>
|
||
</ul>
|
||
<p>切换场站后，告警列表会自动重新加载当前场站的数据。</p>
|
||
|
||
<h3>7.2 告警详情与 AI 诊断</h3>
|
||
<p>点击某条告警进入<strong>告警详情页</strong>：</p>
|
||
<div class="card">
|
||
<ul style="padding-left: 1.2rem;">
|
||
<li><strong>告警基本信息：</strong>告警等级、类型、发生时间、关联设备</li>
|
||
<li><strong>AI 诊断卡片：</strong>系统自动分析告警原因，给出诊断建议</li>
|
||
<li><strong>操作按钮：</strong>派发工单、告警处理</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>7.3 告警处理流程</h3>
|
||
<div class="flow">
|
||
<div class="flow-row">
|
||
<div class="flow-node">查看告警</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-node">AI 诊断</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-node">派发工单</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-node">处理告警</div>
|
||
</div>
|
||
</div>
|
||
|
||
<ol class="steps">
|
||
<li>在告警列表中点击需要处理的告警，进入详情页。</li>
|
||
<li>查看 AI 诊断建议，了解告警的可能原因。</li>
|
||
<li>如需现场处理，点击「派发工单」，将告警转为工单派发给相关人员。</li>
|
||
<li>也可直接点击「告警处理」进行处理操作（确认、忽略等）。</li>
|
||
</ol>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 8. WORKORDER ========== -->
|
||
<section id="workorder">
|
||
<h2 class="section-title"><span class="num">8</span> 工单管理</span></h2>
|
||
<p class="section-desc">工单的全生命周期管理：从派发到回执</p>
|
||
|
||
<p>工单管理页面提供工单的完整流转流程管理，覆盖从派发到归档的全生命周期。</p>
|
||
|
||
<h3>8.1 工单列表</h3>
|
||
<ul style="padding-left: 1.2rem; margin-bottom: 0.85rem;">
|
||
<li><strong>工单数量卡片：</strong>各状态工单的数量统计</li>
|
||
<li><strong>分类标签栏：</strong>按工单状态分类筛选（待处理、进行中、已完成等）</li>
|
||
<li><strong>工单卡片：</strong>显示工单编号、类型、关联设备、创建时间、优先级</li>
|
||
<li>支持上拉加载更多，切换场站自动刷新</li>
|
||
</ul>
|
||
|
||
<h3>8.2 工单流转流程</h3>
|
||
<div class="flow">
|
||
<div class="flow-row">
|
||
<div class="flow-node">工单详情</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-node">到场确认</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-node">处理记录</div>
|
||
</div>
|
||
<span class="flow-arrow down">→</span>
|
||
<div class="flow-row">
|
||
<div class="flow-node">工单汇报</div>
|
||
<span class="flow-arrow">→</span>
|
||
<div class="flow-node">回执归档</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>8.3 各环节操作说明</h3>
|
||
|
||
<h4>工单详情</h4>
|
||
<p>点击工单列表中的某一条目进入工单详情页，查看工单的完整信息，包括工单描述、关联设备、处理人、历史记录等。</p>
|
||
|
||
<h4>到场确认</h4>
|
||
<p>处理人到达现场后，在工单详情页点击「到场」，记录到场时间，工单状态自动变为「处理中」。</p>
|
||
|
||
<h4>处理记录</h4>
|
||
<p>处理过程中可以添加处理记录，描述处理步骤和发现的问题。支持上传照片作为处理凭证。</p>
|
||
|
||
<h4>工单汇报</h4>
|
||
<p>处理完成后，在汇报页面填写处理结果、上传现场照片、记录耗材使用情况等。</p>
|
||
|
||
<h4>回执归档</h4>
|
||
<p>汇报提交后，工单进入待回执状态。确认回执后工单正式归档完成。</p>
|
||
|
||
<h4>工单转派</h4>
|
||
<p>如果当前处理人无法完成工单，可以在详情页使用「转派」功能，将工单转给其他人员处理。转派时会弹出对话框选择接收人。</p>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 9. REPORT ========== -->
|
||
<section id="report">
|
||
<h2 class="section-title"><span class="num">9</span> 问题上报</h2>
|
||
<p class="section-desc">上报现场问题，支持多媒体附件与分级</p>
|
||
|
||
<p>上报页面用于提交现场发现的问题或异常情况，提交后可流转为工单进行处理。</p>
|
||
|
||
<h3>上报流程</h3>
|
||
<ol class="steps">
|
||
<li><strong>选择上报类型：</strong>从预设类型中选择问题类别（如设备故障、环境异常等）。</li>
|
||
<li><strong>选择关联设备：</strong>选择问题涉及的设备（可选）。</li>
|
||
<li><strong>选择严重等级：</strong>为上报问题设定优先级（高/中/低）。</li>
|
||
<li><strong>填写描述：</strong>详细描述问题现象和发生情况。</li>
|
||
<li><strong>上传媒体：</strong>拍照或从相册选取照片/视频作为附件。支持在媒体预览页查看已选内容。</li>
|
||
<li><strong>提交上报：</strong>确认信息无误后提交。提交成功会显示成功提示。</li>
|
||
</ol>
|
||
|
||
<div class="callout">
|
||
<strong>提示：</strong>上报提交后，管理人员可在后台查看并将其转为工单处理。您可以在工单列表中追踪后续处理进度。
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 10. AI ========== -->
|
||
<section id="ai">
|
||
<h2 class="section-title"><span class="num">10</span> AI 助手</h2>
|
||
<p class="section-desc">智能问答助手，随时获取操作指引与设备诊断</p>
|
||
|
||
<p>AI 助手提供智能问答功能，帮助您快速获取设备操作指引、故障排查建议等信息。<span class="badge new">可选功能</span></p>
|
||
|
||
<h3>使用方式</h3>
|
||
<ol class="steps">
|
||
<li>在底部导航栏点击「AI」标签进入助手页面（如未显示，需在导航设置中开启）。</li>
|
||
<li>在底部输入框输入问题，点击发送。</li>
|
||
<li>AI 会以对话形式回复，支持 Markdown 格式渲染。</li>
|
||
<li>点击右上角菜单可以<strong>新建会话</strong>或查看<strong>历史会话记录</strong>。</li>
|
||
</ol>
|
||
|
||
<h3>功能说明</h3>
|
||
<ul style="padding-left: 1.2rem; margin-bottom: 0.85rem;">
|
||
<li><strong>多会话管理：</strong>支持创建多个独立对话会话，互不干扰</li>
|
||
<li><strong>历史记录：</strong>可查看和继续之前的对话</li>
|
||
<li><strong>Markdown 渲染：</strong>回复内容支持表格、代码块、列表等格式</li>
|
||
<li><strong>图片发送：</strong>可上传图片辅助描述问题</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 11. PROFILE ========== -->
|
||
<section id="profile">
|
||
<h2 class="section-title"><span class="num">11</span> 个人中心</h2>
|
||
<p class="section-desc">个人信息、系统设置、夜间模式与缓存管理</p>
|
||
|
||
<p>点击底部导航栏「我的」进入个人中心页面。</p>
|
||
|
||
<h3>11.1 页面内容</h3>
|
||
<div class="card">
|
||
<ul style="padding-left: 1.2rem;">
|
||
<li><strong>用户信息卡片：</strong>显示昵称、角色/邮箱、头像。点击进入个人信息详情页可编辑。</li>
|
||
<li><strong>快捷入口：</strong>我的消息、我的收藏、我的工单</li>
|
||
<li><strong>菜单列表：</strong>系统设置、底部导航设置、关于我们等</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>11.2 个人信息详情</h3>
|
||
<p>在个人信息详情页可以：</p>
|
||
<ul style="padding-left: 1.2rem; margin-bottom: 0.85rem;">
|
||
<li>修改昵称和头像</li>
|
||
<li>查看账号信息（用户名、邮箱、手机号）</li>
|
||
<li>修改登录密码</li>
|
||
</ul>
|
||
|
||
<h3>11.3 系统设置</h3>
|
||
<div class="card">
|
||
<div class="card-title">可配置项</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 35%;">设置项</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>夜间模式</td>
|
||
<td>切换浅色/深色主题，立即生效</td>
|
||
</tr>
|
||
<tr>
|
||
<td>语言切换</td>
|
||
<td>中文 / English 切换</td>
|
||
</tr>
|
||
<tr>
|
||
<td>清除缓存</td>
|
||
<td>清理本地缓存数据，释放存储空间</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 12. UPDATE ========== -->
|
||
<section id="update">
|
||
<h2 class="section-title"><span class="num">12</span> 应用更新</h2>
|
||
<p class="section-desc">差量更新与整包更新两种方式</p>
|
||
|
||
<p>Satabot V2 支持<mark class="key">差量更新（补丁）</mark>和<mark class="key">整包更新</mark>两种更新方式，确保您始终使用最新版本。</p>
|
||
|
||
<h3>更新流程</h3>
|
||
<p>当检测到新版本时，App 会弹出更新提示窗口，显示版本号、更新类型和更新内容。</p>
|
||
|
||
<h4>差量更新（补丁）</h4>
|
||
<div class="card">
|
||
<p>仅下载差异部分的补丁文件，体积小、速度快。</p>
|
||
<ol class="steps">
|
||
<li>点击「立即更新」。</li>
|
||
<li>等待补丁下载完成，显示下载进度。</li>
|
||
<li>补丁应用成功后，按提示<strong>完全关闭 App 并重新打开</strong>即可使用新版本。</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<h4>整包更新</h4>
|
||
<div class="card">
|
||
<p>下载完整的 APK 安装包，适用于大版本更新。</p>
|
||
<p>提供两种下载方式：</p>
|
||
<ul style="padding-left: 1.2rem; margin: 0.5rem 0;">
|
||
<li><strong>浏览器下载（推荐）：</strong>打开浏览器下载 APK，手动安装后卸载旧版本</li>
|
||
<li><strong>App 内下载：</strong>在 App 内下载 APK，完成后调起系统安装界面</li>
|
||
</ul>
|
||
<div class="callout danger" style="margin-bottom: 0;">
|
||
<strong>重要：</strong>整包更新后必须先卸载旧版本，否则可能无法正常使用新功能！
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout warn">
|
||
<strong>强制更新：</strong>部分关键版本更新为强制更新，无法跳过，必须更新后才能继续使用 App。
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 13. TAB SETTINGS ========== -->
|
||
<section id="tab-settings">
|
||
<h2 class="section-title"><span class="num">13</span> 底部导航自定义</h2>
|
||
<p class="section-desc">根据使用习惯定制底部导航栏</p>
|
||
|
||
<p>Satabot V2 允许您自定义底部导航栏的标签页显示和排序，只保留您常用的功能入口。</p>
|
||
|
||
<h3>配置方法</h3>
|
||
<ol class="steps">
|
||
<li>进入「我的」页面。</li>
|
||
<li>找到「底部导航设置」入口并进入设置页面。</li>
|
||
<li>每个标签页旁有<strong>开关</strong>，打开/关闭即可控制是否显示在底部导航栏。</li>
|
||
<li>可通过拖拽调整标签页的排列顺序。</li>
|
||
<li>至少保留一个标签页，系统不允许全部关闭。</li>
|
||
</ol>
|
||
|
||
<h3>可配置的标签页</h3>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>标签页</th>
|
||
<th>默认状态</th>
|
||
<th>说明</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>首页</td><td>显示</td><td>场站看板与快捷入口</td></tr>
|
||
<tr><td>设备</td><td>显示</td><td>机器人与无人机管理</td></tr>
|
||
<tr><td>AI</td><td>隐藏</td><td>智能问答助手</td></tr>
|
||
<tr><td>告警</td><td>显示</td><td>告警中心</td></tr>
|
||
<tr><td>工单</td><td>显示</td><td>工单管理</td></tr>
|
||
<tr><td>上报</td><td>显示</td><td>问题上报</td></tr>
|
||
<tr><td>我的</td><td>显示</td><td>个人中心</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ========== 14. FAQ ========== -->
|
||
<section id="faq">
|
||
<h2 class="section-title"><span class="num">14</span> 常见问题</h2>
|
||
<p class="section-desc">使用过程中可能遇到的问题与解决方案</p>
|
||
|
||
<div class="card">
|
||
<h4>Q1：登录后页面空白或加载失败？</h4>
|
||
<p>请检查网络连接是否正常。如果网络正常但问题持续，尝试在「我的 → 系统设置 → 清除缓存」后重新加载。首页右上角的连接状态指示器可帮助判断服务器是否连通。</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Q2：远程控制画面不显示？</h4>
|
||
<p>WebRTC 视频流需要一定的连接时间，请耐心等待几秒。如果长时间无画面，请确认：(1) 设备在线且摄像头正常；(2) 网络带宽充足；(3) 退出远程控制页面后重新进入。</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Q3：无法获取设备控制权限？</h4>
|
||
<p>同一设备同时只能有一个控制者。如果提示权限被占用，说明其他人正在控制该设备。请等待对方释放权限后再试。</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Q4：路径规划页面提示「请先选择设备」？</h4>
|
||
<p>路径规划需要先选定一台设备作为目标。请在首页或设备列表中选中一台设备后再进入路径规划。</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Q5：切换场站后数据没有更新？</h4>
|
||
<p>切换场站后各页面会自动重新加载数据。如果数据未及时更新，请尝试下拉刷新当前页面。</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Q6：App 更新后无法正常使用？</h4>
|
||
<p>如果是整包更新（非差量补丁），请确保已卸载旧版本。整包更新引导弹窗中有详细步骤说明。如果差量更新后出现问题，请尝试完全关闭 App（从后台划掉）后重新打开。</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Q7：蓝牙扫描不到设备？</h4>
|
||
<p>请确认：(1) 手机蓝牙已开启；(2) 已授予 App 蓝牙权限；(3) 设备已开机且在蓝牙有效范围内（通常 10 米以内）；(4) 设备未被其他手机绑定。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>Maibu Satabot V2 用户使用手册 — 文档版本 1.0 | 2026-09</p>
|
||
<p style="margin-top: 0.3rem;">本文档基于应用代码分析生成，如有界面差异以实际 App 为准。</p>
|
||
</footer>
|
||
|
||
</article>
|
||
</body>
|
||
</html>
|