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