253 lines
9.8 KiB
React
253 lines
9.8 KiB
React
|
import React from 'react'
|
|||
|
|
import { Card, Divider } from 'antd'
|
|||
|
|
|
|||
|
|
function Guide() {
|
|||
|
|
return (
|
|||
|
|
<div className="guide-page">
|
|||
|
|
<Card>
|
|||
|
|
<h1>使用说明</h1>
|
|||
|
|
<Divider />
|
|||
|
|
|
|||
|
|
<h2>一、登录系统</h2>
|
|||
|
|
<ol>
|
|||
|
|
<li>打开系统后进入登录页面</li>
|
|||
|
|
<li>输入用户名和密码</li>
|
|||
|
|
<li>点击"登录"按钮进入系统</li>
|
|||
|
|
</ol>
|
|||
|
|
<p>默认管理员账号：</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>用户名：<strong>admin</strong></li>
|
|||
|
|
<li>密码：<strong>admin123</strong></li>
|
|||
|
|
</ul>
|
|||
|
|
<div className="warning">注意：首次登录后建议立即修改默认密码。</div>
|
|||
|
|
|
|||
|
|
<h2>二、每日天气</h2>
|
|||
|
|
<p>登录成功后，页面顶部导航栏右侧会显示当前城市天气信息，包括：</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>当前温度</li>
|
|||
|
|
<li>天气状况（晴、多云、雨、雪等）</li>
|
|||
|
|
<li>今日最高/最低温度</li>
|
|||
|
|
<li>湿度和风速（鼠标悬停查看详情）</li>
|
|||
|
|
</ul>
|
|||
|
|
<div className="tip">天气数据来自 Open-Meteo 免费天气接口，需要联网才能正常显示。</div>
|
|||
|
|
|
|||
|
|
<h2>三、问候语</h2>
|
|||
|
|
<p>登录后，顶部导航栏会根据当前时间自动显示问候语：</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>06:00 - 09:00：早上好</li>
|
|||
|
|
<li>09:00 - 12:00：上午好</li>
|
|||
|
|
<li>12:00 - 14:00：中午好</li>
|
|||
|
|
<li>14:00 - 18:00：下午好</li>
|
|||
|
|
<li>18:00 - 06:00：晚上好</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>四、退出登录</h2>
|
|||
|
|
<p>点击右上角用户名，在下拉菜单中选择"退出登录"即可安全退出系统。</p>
|
|||
|
|
|
|||
|
|
<h2>五、系统首页（仪表盘）</h2>
|
|||
|
|
<p>系统首页提供数据的整体概览，包括：</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>设备总数及状态分布（正常、维修中、已报废）</li>
|
|||
|
|
<li>人员总数及在职情况</li>
|
|||
|
|
<li>未读通知数量</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>点击卡片可快速跳转到对应的管理页面。</p>
|
|||
|
|
|
|||
|
|
<h2>六、设备管理</h2>
|
|||
|
|
<h3>6.1 查看设备列表</h3>
|
|||
|
|
<p>进入"设备管理"页面后，可以看到所有设备的列表，包含设备名称、类型、型号、序列号、状态、位置等信息。</p>
|
|||
|
|
|
|||
|
|
<h3>6.2 添加设备</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>点击页面右上角的"添加设备"按钮</li>
|
|||
|
|
<li>在弹出的表单中填写设备信息（名称和类型为必填项）</li>
|
|||
|
|
<li>点击"确定"保存</li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
<h3>6.3 编辑设备</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>在设备列表中找到需要编辑的设备</li>
|
|||
|
|
<li>点击操作列的"编辑"按钮</li>
|
|||
|
|
<li>修改设备信息后点击"确定"保存</li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
<h3>6.4 删除设备</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>在设备列表中找到需要删除的设备</li>
|
|||
|
|
<li>点击操作列的"删除"按钮</li>
|
|||
|
|
<li>在确认对话框中点击"确定"</li>
|
|||
|
|
</ol>
|
|||
|
|
<div className="warning">注意：删除操作不可恢复，请谨慎操作。</div>
|
|||
|
|
|
|||
|
|
<h3>6.5 搜索和筛选</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>在搜索框中输入关键词可按设备名称、序列号、位置搜索</li>
|
|||
|
|
<li>通过“设备类型”下拉框按类型筛选</li>
|
|||
|
|
<li>通过“设备状态”下拉框按状态筛选</li>
|
|||
|
|
<li>点击“重置”按钮清除所有筛选条件</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h3>6.6 设备报修与维修状态修改</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><strong>设备报修（普通账户+管理员）：</strong>点击操作列的“报修”按钮，确认后设备状态即变为“维修中”。</li>
|
|||
|
|
<li><strong>修改维修状态（仅管理员）：</strong>点击操作列的“维修状态”按钮，在弹窗中选择新状态（正常/维修中/已报废/闲置）后确定。例如维修完成后，可将状态从“维修中”改回“正常”。</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>七、人员管理</h2>
|
|||
|
|
<h3>7.1 查看人员列表</h3>
|
|||
|
|
<p>进入"人员管理"页面后，可以看到所有人员的信息，包含姓名、工号、部门、职位、联系方式等。</p>
|
|||
|
|
|
|||
|
|
<h3>7.2 添加人员</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>点击页面右上角的"添加人员"按钮</li>
|
|||
|
|
<li>在弹出的表单中填写人员信息（姓名为必填项）</li>
|
|||
|
|
<li>点击"确定"保存</li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
<h3>7.3 编辑和删除人员</h3>
|
|||
|
|
<p>操作方式与设备管理类似，点击对应操作列的按钮即可。</p>
|
|||
|
|
|
|||
|
|
<h3>7.4 搜索和筛选</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>搜索框支持按姓名、工号、手机号搜索</li>
|
|||
|
|
<li>可按部门和在职状态进行筛选</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h3>7.5 创建登录账户（多用户管理）</h3>
|
|||
|
|
<p>添加/编辑人员时，打开"创建/启用登录账户"开关，即可为该人员同步创建登录账户：</p>
|
|||
|
|
<ol>
|
|||
|
|
<li>填写登录用户名和密码</li>
|
|||
|
|
<li>选择账户角色：普通账户 或 管理员账户</li>
|
|||
|
|
<li>保存后，该人员即可用此账户登录系统</li>
|
|||
|
|
</ol>
|
|||
|
|
<div className="tip">人员与账户一一对应。删除人员时会同时删除其登录账户；关闭开关则停用账户。</div>
|
|||
|
|
|
|||
|
|
<h3>7.6 账户权限说明</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><strong>普通账户：</strong>添加设备、设备报修、查看人员、查看通知</li>
|
|||
|
|
<li><strong>管理员账户：</strong>拥有全部权限（编辑/删除设备、管理人员与账户、发布/删除通知等）</li>
|
|||
|
|
</ul>
|
|||
|
|
<div className="warning">注意：普通账户登录后，界面上仅显示其有权限的操作按钮，后端也会做权限校验。</div>
|
|||
|
|
|
|||
|
|
<h2>八、通知管理</h2>
|
|||
|
|
<h3>8.1 查看通知列表</h3>
|
|||
|
|
<p>进入"通知管理"页面后，可以看到所有发布的通知，包含标题、类型、优先级、阅读状态等信息。</p>
|
|||
|
|
|
|||
|
|
<h3>8.2 发布通知</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>点击页面右上角的"发布通知"按钮</li>
|
|||
|
|
<li>填写通知标题、内容</li>
|
|||
|
|
<li>选择通知类型（通知、公告、提醒）</li>
|
|||
|
|
<li>选择优先级（普通、高）</li>
|
|||
|
|
<li>选择目标范围（全部、技术部、行政部等）</li>
|
|||
|
|
<li>点击"确定"发布</li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
<h3>8.3 标记已读</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>点击单条通知的"标记已读"按钮可将该通知标为已读</li>
|
|||
|
|
<li>点击"全部已读"按钮可一键标记所有通知为已读</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h3>8.4 筛选通知</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>可按关键词搜索标题和内容</li>
|
|||
|
|
<li>可按类型、优先级、阅读状态筛选</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>九、服务器部署指南</h2>
|
|||
|
|
<h3>9.1 环境准备</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>安装 Node.js 18 或以上版本</li>
|
|||
|
|
<li>将项目文件上传到服务器</li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
<h3>9.2 安装依赖</h3>
|
|||
|
|
<pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4 }}>
|
|||
|
|
{`cd device-management-system
|
|||
|
|
npm install
|
|||
|
|
cd client
|
|||
|
|
npm install
|
|||
|
|
npm run build
|
|||
|
|
cd ..`}
|
|||
|
|
</pre>
|
|||
|
|
|
|||
|
|
<h3>9.3 启动服务</h3>
|
|||
|
|
<pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4 }}>
|
|||
|
|
{`# 启动服务（默认端口3001）
|
|||
|
|
npm start
|
|||
|
|
|
|||
|
|
# 或指定端口
|
|||
|
|
PORT=8080 npm start`}
|
|||
|
|
</pre>
|
|||
|
|
|
|||
|
|
<h3>9.4 访问系统</h3>
|
|||
|
|
<p>浏览器打开 http://服务器IP:3001 即可使用系统。</p>
|
|||
|
|
|
|||
|
|
<div className="tip">
|
|||
|
|
提示：建议使用 PM2 等进程管理工具保持服务后台运行：
|
|||
|
|
<pre style={{ marginTop: 8 }}>
|
|||
|
|
{`npm install -g pm2
|
|||
|
|
pm2 start server.js --name device-manager`}
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>十、桌面应用打包</h2>
|
|||
|
|
<h3>10.1 Windows EXE 打包</h3>
|
|||
|
|
<pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4 }}>
|
|||
|
|
{`# 安装依赖
|
|||
|
|
npm install
|
|||
|
|
cd client && npm install && npm run build && cd ..
|
|||
|
|
|
|||
|
|
# 打包 Windows 安装包
|
|||
|
|
npm run electron:build:win`}
|
|||
|
|
</pre>
|
|||
|
|
<p>打包完成后，EXE安装包位于 <code>dist-electron</code> 目录中。</p>
|
|||
|
|
|
|||
|
|
<h2>十一、手机端使用</h2>
|
|||
|
|
<h3>11.1 手机浏览器访问（响应式网页）</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>确保手机与服务器在同一局域网</li>
|
|||
|
|
<li>手机浏览器打开 http://服务器IP:3001</li>
|
|||
|
|
<li>页面会自动切换为移动端布局（底部导航 + 抽屉菜单）</li>
|
|||
|
|
</ol>
|
|||
|
|
|
|||
|
|
<h3>11.2 安装为 PWA 应用（推荐）</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>用手机 Chrome / Edge 浏览器打开系统</li>
|
|||
|
|
<li>点击浏览器菜单中的"添加到主屏幕" / "安装应用"</li>
|
|||
|
|
<li>安装后从桌面图标打开，体验接近原生App</li>
|
|||
|
|
</ol>
|
|||
|
|
<div className="tip">PWA 方式无需应用商店，安装简单，支持离线缓存。</div>
|
|||
|
|
|
|||
|
|
<h3>11.3 打包原生 Android App（APK）</h3>
|
|||
|
|
<pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4 }}>
|
|||
|
|
{`# 前置: 安装 Android Studio 及 SDK
|
|||
|
|
|
|||
|
|
# 双击 build-app.bat 或手动执行:
|
|||
|
|
cd client
|
|||
|
|
npm install
|
|||
|
|
npm run build
|
|||
|
|
npx capacitor add android
|
|||
|
|
npx capacitor sync android
|
|||
|
|
npx capacitor open android
|
|||
|
|
|
|||
|
|
# 在 Android Studio 中 Build APK
|
|||
|
|
# APK位置: android/app/build/outputs/apk/debug/app-debug.apk`}
|
|||
|
|
</pre>
|
|||
|
|
|
|||
|
|
<h3>11.4 App 配置服务器地址</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>打开App进入登录页</li>
|
|||
|
|
<li>点击"服务器设置"展开配置</li>
|
|||
|
|
<li>输入服务器地址，如 http://192.168.1.100:3001</li>
|
|||
|
|
<li>输入账号密码登录</li>
|
|||
|
|
</ol>
|
|||
|
|
<div className="warning">注意：App 必须能访问到服务器，请确保手机与服务器网络互通。</div>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Guide
|