1154 lines
36 KiB
Vue
1154 lines
36 KiB
Vue
<template>
|
||
<div class="help-page">
|
||
<!-- 顶部导航 -->
|
||
<header class="navbar">
|
||
<div class="navbar-content">
|
||
<div class="logo" @click="goToHome">
|
||
<img src="@/assets/logo.png" alt="Logo" />
|
||
<span class="logo-text">智能运维管理系统</span>
|
||
</div>
|
||
<nav class="nav-links">
|
||
<a href="#" @click.prevent="goToHome">首页</a>
|
||
<a href="#help">帮助中心</a>
|
||
<a-button type="primary" @click="goToLogin">登录系统</a-button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Banner 区域 -->
|
||
<section class="help-banner">
|
||
<img src="@/assets/images/home1.jpg" alt="Banner" class="banner-image" />
|
||
<div class="banner-overlay"></div>
|
||
<div class="banner-content">
|
||
<h1>帮助中心</h1>
|
||
<p>智能运维管理系统使用指南，助您快速掌握系统功能</p>
|
||
<!-- <div class="search-box">
|
||
<a-input
|
||
v-model="searchQuery"
|
||
placeholder="搜索帮助文档..."
|
||
size="large"
|
||
allow-clear
|
||
@press-enter="handleSearch"
|
||
>
|
||
<template #prefix>
|
||
<IconSearch />
|
||
</template>
|
||
</a-input>
|
||
</div> -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 主要内容区 -->
|
||
<main class="help-content">
|
||
<div class="content-container">
|
||
<!-- 左侧目录 -->
|
||
<aside class="help-sidebar">
|
||
<a-menu :default-selected-keys="[activeCategory]" @menu-item-click="handleCategoryClick">
|
||
<a-menu-item key="all">
|
||
<template #icon><IconList /></template>
|
||
全部文档
|
||
</a-menu-item>
|
||
<a-menu-item key="quickstart">
|
||
<template #icon><IconRocket /></template>
|
||
快速入门
|
||
</a-menu-item>
|
||
<a-menu-item key="monitor">
|
||
<template #icon><IconDesk /></template>
|
||
综合监控
|
||
</a-menu-item>
|
||
<a-menu-item key="alert">
|
||
<template #icon><IconAlertCircle /></template>
|
||
告警管理
|
||
</a-menu-item>
|
||
<a-menu-item key="datacenter">
|
||
<template #icon><IconBuilding /></template>
|
||
数据中心
|
||
</a-menu-item>
|
||
<a-menu-item key="netarch">
|
||
<template #icon><IconNetwork /></template>
|
||
网络架构
|
||
</a-menu-item>
|
||
<a-menu-item key="asset">
|
||
<template #icon><IconPackage /></template>
|
||
资产管理
|
||
</a-menu-item>
|
||
<a-menu-item key="ticket">
|
||
<template #icon><IconTicket /></template>
|
||
工单管理
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</aside>
|
||
|
||
<!-- 右侧内容 -->
|
||
<div class="help-main">
|
||
<!-- FAQ 常见问题 -->
|
||
<section id="faq" class="help-section">
|
||
<h2 class="section-title">
|
||
<IconHelp />
|
||
常见问题
|
||
</h2>
|
||
|
||
<div class="faq-list">
|
||
<a-collapse>
|
||
<a-collapse-item
|
||
v-for="(item, index) in filteredFaqs"
|
||
:key="index"
|
||
:header="item.question"
|
||
>
|
||
<div class="faq-answer">
|
||
{{ item.answer }}
|
||
</div>
|
||
</a-collapse-item>
|
||
</a-collapse>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 使用指南 -->
|
||
<section id="guides" class="help-section">
|
||
<h2 class="section-title">
|
||
<IconBook />
|
||
使用指南
|
||
</h2>
|
||
|
||
<div class="guide-grid">
|
||
<div
|
||
v-for="guide in filteredGuides"
|
||
:key="guide.id"
|
||
class="guide-card"
|
||
@click="openGuideDetail(guide)"
|
||
>
|
||
<div class="guide-icon">
|
||
<component :is="guide.icon" />
|
||
</div>
|
||
<h3>{{ guide.title }}</h3>
|
||
<p>{{ guide.description }}</p>
|
||
<div class="guide-meta">
|
||
<span class="guide-category">{{ guide.categoryName }}</span>
|
||
<span class="guide-updated">{{ guide.updatedAt }}</span>
|
||
</div>
|
||
<div class="guide-action">
|
||
<span class="view-link">点击查看详情 →</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 联系我们 -->
|
||
<section class="help-section contact-section">
|
||
<h2 class="section-title">
|
||
<IconHeadset />
|
||
需要更多帮助？
|
||
</h2>
|
||
<p class="section-desc">我们提供多种联系方式，随时为您解答疑问</p>
|
||
|
||
<div class="contact-cards">
|
||
<div class="contact-card">
|
||
<div class="contact-icon">
|
||
<IconPhone />
|
||
</div>
|
||
<div class="contact-content">
|
||
<h3>技术支持热线</h3>
|
||
<p class="contact-time">工作日 9:00-18:00</p>
|
||
<p class="contact-value">400-888-8888</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-card">
|
||
<div class="contact-icon">
|
||
<IconMail />
|
||
</div>
|
||
<div class="contact-content">
|
||
<h3>邮件咨询</h3>
|
||
<p class="contact-time">我们会在 24 小时内回复</p>
|
||
<p class="contact-value">david.yan@qq.com</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-card">
|
||
<div class="contact-icon">
|
||
<IconMessage />
|
||
</div>
|
||
<div class="contact-content">
|
||
<h3>在线客服</h3>
|
||
<p class="contact-time">实时在线解答</p>
|
||
<a-button type="primary" @click="openChat">
|
||
开始聊天
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="footer-content">
|
||
<p>© 2026 智能运维管理系统。All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 使用指南详情弹窗 -->
|
||
<a-modal
|
||
v-model:visible="guideModalVisible"
|
||
:title="currentGuide?.title"
|
||
:width="800"
|
||
:footer="false"
|
||
unmount-on-close
|
||
>
|
||
<div class="guide-detail-content">
|
||
<div class="guide-detail-header">
|
||
<div class="guide-detail-meta">
|
||
<a-tag color="arcoblue">{{ currentGuide?.categoryName }}</a-tag>
|
||
<span class="guide-detail-date">更新时间：{{ currentGuide?.updatedAt }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="guide-detail-body">
|
||
<div v-if="currentGuide?.content" class="guide-content">
|
||
<div v-for="(section, idx) in currentGuide.content" :key="idx" class="content-section">
|
||
<h3>{{ section.title }}</h3>
|
||
<p>{{ section.text }}</p>
|
||
<ul v-if="section.items">
|
||
<li v-for="(item, i) in section.items" :key="i">{{ item }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div v-else class="guide-placeholder">
|
||
<a-empty description="文档内容正在编写中，敬请期待" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, computed } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { Message } from '@arco-design/web-vue'
|
||
import {
|
||
IconSearch,
|
||
IconList,
|
||
IconRocket,
|
||
IconDesk,
|
||
IconAlertCircle,
|
||
IconBuilding,
|
||
IconNetwork,
|
||
IconPackage,
|
||
IconTicket,
|
||
IconHelp,
|
||
IconBook,
|
||
IconHeadset,
|
||
IconPhone,
|
||
IconMail,
|
||
IconMessage,
|
||
} from '@tabler/icons-vue'
|
||
|
||
const router = useRouter()
|
||
const searchQuery = ref('')
|
||
const activeCategory = ref('all')
|
||
|
||
// 弹窗状态
|
||
const guideModalVisible = ref(false)
|
||
const currentGuide = ref<any>(null)
|
||
|
||
// FAQ 数据 - 智能运维管理系统相关
|
||
const faqs = ref([
|
||
{
|
||
question: '如何登录智能运维管理系统？',
|
||
answer: '在登录页面输入您的用户名和密码，点击登录按钮即可。如果忘记密码，可以点击"忘记密码"链接进行重置，或联系系统管理员协助重置密码。',
|
||
category: 'quickstart'
|
||
},
|
||
{
|
||
question: '如何查看服务器和PC设备的运行状态？',
|
||
answer: '登录系统后，进入"服务器及PC管理"菜单，可以查看服务器管理和办公PC管理两个子模块。在列表中可以查看设备的在线状态、资源使用情况等详细信息。',
|
||
category: 'quickstart'
|
||
},
|
||
{
|
||
question: '如何配置监控告警策略？',
|
||
answer: '进入"告警管理" -> "告警策略管理"页面，点击"新建策略"按钮，选择监控对象类型、设置告警条件、通知方式和接收人员，保存后即可生效。系统支持多种告警通知渠道，包括邮件、短信、企业微信等。',
|
||
category: 'alert'
|
||
},
|
||
{
|
||
question: '告警触发后如何处理？',
|
||
answer: '当告警触发时，进入"告警管理" -> "告警受理处理"页面，可以查看待处理的告警列表。点击具体告警记录，可以查看详细信息并进行受理、转派或关闭操作。处理完成后，告警记录会保存在告警历史中供后续查询。',
|
||
category: 'alert'
|
||
},
|
||
{
|
||
question: '如何查看网络设备的监控数据？',
|
||
answer: '进入"综合监控" -> "网络设备监控"页面，可以查看所有网络设备的实时监控数据，包括设备状态、端口流量、CPU/内存使用率等。支持按设备类型、IP地址等条件筛选，也可以设置监控阈值。',
|
||
category: 'monitor'
|
||
},
|
||
{
|
||
question: '如何查看存储设备的运行状态？',
|
||
answer: '进入"综合监控" -> "存储设备监控"页面，可以查看存储设备的容量使用情况、IOPS、吞吐量等关键指标。系统支持多种存储品牌和型号的自动发现和监控。',
|
||
category: 'monitor'
|
||
},
|
||
{
|
||
question: '如何管理数据中心的机柜信息？',
|
||
answer: '进入"数据中心管理" -> "机柜管理"页面，可以添加、编辑、删除机柜信息。支持查看机柜内的设备分布、U位使用情况，以及机柜的电力和制冷状态。还可以通过可视化界面查看机柜布局。',
|
||
category: 'datacenter'
|
||
},
|
||
{
|
||
question: '如何添加新的数据中心和楼层？',
|
||
answer: '在"数据中心管理"模块中，先在"数据中心"页面添加数据中心基本信息，然后在"楼层管理"页面添加该数据中心的楼层信息。添加完成后，可以在机柜管理中关联具体位置。',
|
||
category: 'datacenter'
|
||
},
|
||
{
|
||
question: '如何查看网络拓扑图？',
|
||
answer: '进入"网络架构管理" -> "拓扑管理"页面，可以查看和管理网络拓扑图。系统支持自动发现网络设备并生成拓扑图，也可以手动编辑拓扑结构。"自动感知拓扑图"功能可以实时更新网络拓扑变化。',
|
||
category: 'netarch'
|
||
},
|
||
{
|
||
question: '如何进行IP地址管理？',
|
||
answer: '进入"网络架构管理" -> "IP地址管理"页面，可以查看和管理IP地址池。支持IP地址分配、回收、冲突检测等功能，可以按子网、VLAN等维度进行管理。',
|
||
category: 'netarch'
|
||
},
|
||
{
|
||
question: '如何添加新的资产设备？',
|
||
answer: '进入"资产管理" -> "设备管理"页面，点击"新增设备"按钮，填写设备基本信息（名称、型号、IP地址等）、选择设备分类、关联供应商信息，保存后即可完成添加。也可以通过批量导入功能一次性添加多台设备。',
|
||
category: 'asset'
|
||
},
|
||
{
|
||
question: '如何管理设备供应商信息？',
|
||
answer: '在"资产管理" -> "供应商管理"页面，可以添加和维护供应商信息，包括供应商名称、联系方式、服务范围等。设备管理时可以关联供应商，便于后续的维保管理。',
|
||
category: 'asset'
|
||
},
|
||
{
|
||
question: '如何创建和处理工单？',
|
||
answer: '进入"工单管理"模块，可以创建新工单或处理待办工单。在"我的工单"中查看分配给自己的工单，在"所有工单"中查看全部工单。支持工单的创建、分配、处理、转派、关闭等完整流程。',
|
||
category: 'ticket'
|
||
},
|
||
{
|
||
question: '如何配置数据库和中间件的采集？',
|
||
answer: '进入"集群采集控制中心"模块，在"数据库采集管理"或"中间件采集管理"页面，可以配置需要监控的数据库和中间件实例。填写连接信息后，系统会自动采集性能指标和运行状态。',
|
||
category: 'monitor'
|
||
},
|
||
{
|
||
question: '如何查看可视化大屏？',
|
||
answer: '进入"可视化大屏管理"模块，可以查看和管理运维大屏。在"大屏管理"中创建和编辑大屏，在"已发布大屏列表"中查看已发布的大屏。大屏可以展示监控概览、告警统计、资源使用等关键指标。',
|
||
category: 'quickstart'
|
||
},
|
||
{
|
||
question: '系统支持哪些浏览器？',
|
||
answer: '智能运维管理系统支持主流的现代浏览器，包括 Chrome（推荐）、Firefox、Edge、Safari 等。建议使用最新版本的浏览器以获得最佳体验，屏幕分辨率建议 1920x1080 及以上。',
|
||
category: 'quickstart'
|
||
}
|
||
])
|
||
|
||
// 使用指南数据 - 包含详细内容
|
||
const guides = ref([
|
||
{
|
||
id: 1,
|
||
title: '系统快速入门指南',
|
||
description: '帮助您快速了解智能运维管理系统的基本功能和操作流程',
|
||
icon: IconRocket,
|
||
category: 'quickstart',
|
||
categoryName: '快速入门',
|
||
updatedAt: '2026-03-15',
|
||
content: [
|
||
{
|
||
title: '系统概述',
|
||
text: '智能运维管理系统是一套集监控、告警、资产管理、工单处理于一体的综合运维平台，旨在帮助运维人员高效管理IT基础设施。'
|
||
},
|
||
{
|
||
title: '登录系统',
|
||
text: '打开浏览器访问系统地址，输入用户名和密码登录。首次登录建议修改默认密码，确保账户安全。',
|
||
items: ['支持多种认证方式', '支持单点登录(SSO)', '支持密码找回功能']
|
||
},
|
||
{
|
||
title: '主要功能模块',
|
||
text: '系统包含以下核心功能模块：',
|
||
items: [
|
||
'系统概况：查看整体运维状态概览',
|
||
'可视化大屏管理：创建和管理运维展示大屏',
|
||
'服务器及PC管理：管理服务器和办公电脑',
|
||
'集群采集控制中心：配置数据库、中间件、网络设备采集',
|
||
'综合监控：监控各类IT设备和环境',
|
||
'网络架构管理：拓扑管理、流量分析、IP管理',
|
||
'告警管理：告警策略、告警处理、告警历史',
|
||
'工单管理：创建和处理运维工单',
|
||
'数据中心管理：机房、楼层、机柜管理',
|
||
'资产管理：设备分类、设备信息、供应商管理'
|
||
]
|
||
},
|
||
{
|
||
title: '界面导航',
|
||
text: '左侧为功能菜单，点击展开子菜单；顶部显示当前页面标题和用户信息；右侧为内容区域，展示具体功能页面。'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '综合监控使用手册',
|
||
description: '详细介绍网络设备、存储、安全设备、虚拟化等各类监控功能的使用方法',
|
||
icon: IconDesk,
|
||
category: 'monitor',
|
||
categoryName: '综合监控',
|
||
updatedAt: '2026-03-18',
|
||
content: [
|
||
{
|
||
title: '监控概述',
|
||
text: '综合监控模块提供对IT基础设施的全方位监控，包括网络设备、存储设备、安全设备、虚拟化平台、环境动力等。'
|
||
},
|
||
{
|
||
title: '网络设备监控',
|
||
text: '进入"综合监控" -> "网络设备监控"，可以查看路由器、交换机、防火墙等网络设备的运行状态。',
|
||
items: ['实时查看设备在线状态', '监控端口流量和带宽使用', '查看CPU、内存使用率', '配置监控阈值和告警']
|
||
},
|
||
{
|
||
title: '存储设备监控',
|
||
text: '进入"综合监控" -> "存储设备监控"，监控存储阵列、NAS等存储设备。',
|
||
items: ['查看存储容量和使用率', '监控IOPS和吞吐量', '查看磁盘健康状态', '支持主流存储品牌']
|
||
},
|
||
{
|
||
title: '虚拟化监控',
|
||
text: '进入"综合监控" -> "虚拟化监控"，监控VMware、Hyper-V等虚拟化平台。',
|
||
items: ['查看虚拟机运行状态', '监控资源分配和使用', '查看宿主机性能指标']
|
||
},
|
||
{
|
||
title: '环境动力监控',
|
||
text: '进入"综合监控" -> "电力/UPS/空调/温湿度"，监控机房环境。',
|
||
items: ['UPS状态和电池容量', '空调运行状态', '温湿度实时数据', '电力负载情况']
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '告警配置与管理指南',
|
||
description: '从告警策略配置到告警处理的全流程操作说明',
|
||
icon: IconAlertCircle,
|
||
category: 'alert',
|
||
categoryName: '告警管理',
|
||
updatedAt: '2026-03-20',
|
||
content: [
|
||
{
|
||
title: '告警体系概述',
|
||
text: '告警管理模块提供完整的告警生命周期管理，从告警策略配置、告警触发、告警通知到告警处理和归档。'
|
||
},
|
||
{
|
||
title: '告警级别管理',
|
||
text: '系统预设多个告警级别（紧急、重要、一般、提示），可在"告警级别管理"中自定义级别名称和颜色标识。'
|
||
},
|
||
{
|
||
title: '告警模版配置',
|
||
text: '在"告警模版"中创建告警规则模版，定义监控指标、阈值条件、告警级别等。',
|
||
items: ['选择监控对象类型', '设置指标和阈值条件', '配置告警级别', '设置静默时间']
|
||
},
|
||
{
|
||
title: '告警策略管理',
|
||
text: '在"告警策略管理"中将模版应用到具体设备或设备组，并配置通知方式。',
|
||
items: ['选择告警模版', '指定监控对象', '配置通知渠道', '设置通知接收人']
|
||
},
|
||
{
|
||
title: '告警受理处理',
|
||
text: '在"告警受理处理"中查看和处理触发的告警。',
|
||
items: ['查看告警详情', '受理告警并标记处理状态', '转派给其他人员', '添加处理备注', '关闭告警']
|
||
},
|
||
{
|
||
title: '告警历史查询',
|
||
text: '在"告警历史"中查询历史告警记录，支持按时间、设备、级别等条件筛选。'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '数据中心管理手册',
|
||
description: '数据中心、楼层、机柜等基础设施的管理方法',
|
||
icon: IconBuilding,
|
||
category: 'datacenter',
|
||
categoryName: '数据中心',
|
||
updatedAt: '2026-03-19',
|
||
content: [
|
||
{
|
||
title: '数据中心管理概述',
|
||
text: '数据中心管理模块用于管理机房基础设施信息，包括数据中心、楼层、机柜的层级管理。'
|
||
},
|
||
{
|
||
title: '数据中心信息管理',
|
||
text: '在"数据中心"页面管理数据中心基本信息。',
|
||
items: ['数据中心名称和编码', '地理位置和地址', '总面积和可用面积', '负责人和联系方式']
|
||
},
|
||
{
|
||
title: '楼层管理',
|
||
text: '在"楼层管理"页面添加数据中心下的楼层信息。',
|
||
items: ['楼层编号和名称', '楼层面积', '功能区域划分']
|
||
},
|
||
{
|
||
title: '机柜管理',
|
||
text: '在"机柜管理"页面管理机柜信息，支持可视化机柜布局。',
|
||
items: ['机柜编号和位置', '机柜规格（高度、宽度）', 'U位使用情况', '机柜内设备列表', '电力和制冷状态']
|
||
},
|
||
{
|
||
title: '机柜可视化',
|
||
text: '点击机柜可查看机柜内部设备分布图，直观展示U位占用情况，支持设备上架、下架操作。'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '网络架构管理指南',
|
||
description: '拓扑管理、流量分析、IP地址管理等网络运维功能详解',
|
||
icon: IconNetwork,
|
||
category: 'netarch',
|
||
categoryName: '网络架构',
|
||
updatedAt: '2026-03-17',
|
||
content: [
|
||
{
|
||
title: '网络架构管理概述',
|
||
text: '网络架构管理模块提供网络拓扑可视化、流量分析、IP地址管理等功能，帮助运维人员全面掌握网络架构。'
|
||
},
|
||
{
|
||
title: '拓扑管理',
|
||
text: '在"拓扑管理"中创建和管理网络拓扑图。',
|
||
items: ['手动创建拓扑图', '自动发现网络拓扑', '编辑设备连接关系', '设置拓扑图展示样式']
|
||
},
|
||
{
|
||
title: '自动感知拓扑图',
|
||
text: '系统可自动发现网络设备及其连接关系，生成动态拓扑图，实时反映网络架构变化。'
|
||
},
|
||
{
|
||
title: '流量分析管理',
|
||
text: '在"流量分析管理"中查看网络流量数据。',
|
||
items: ['查看端口流量统计', '分析流量趋势', '识别流量异常', '生成流量报表']
|
||
},
|
||
{
|
||
title: 'IP地址管理',
|
||
text: '在"IP地址管理"中管理IP地址资源。',
|
||
items: ['IP地址池管理', 'IP分配和回收', 'IP冲突检测', '子网划分管理']
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 6,
|
||
title: '资产管理操作手册',
|
||
description: '设备分类、设备信息、供应商等资产管理功能说明',
|
||
icon: IconPackage,
|
||
category: 'asset',
|
||
categoryName: '资产管理',
|
||
updatedAt: '2026-03-16',
|
||
content: [
|
||
{
|
||
title: '资产管理概述',
|
||
text: '资产管理模块用于管理IT资产的全生命周期，包括设备分类、设备信息、供应商管理等。'
|
||
},
|
||
{
|
||
title: '设备分类管理',
|
||
text: '在"设备分类管理"中建立设备分类体系。',
|
||
items: ['创建分类树形结构', '设置分类属性模板', '关联监控类型']
|
||
},
|
||
{
|
||
title: '设备管理',
|
||
text: '在"设备管理"中维护设备资产信息。',
|
||
items: [
|
||
'设备基本信息：名称、型号、序列号',
|
||
'设备位置：数据中心、楼层、机柜、U位',
|
||
'设备配置：IP地址、操作系统、配置参数',
|
||
'维保信息：购买日期、保修期限、供应商',
|
||
'设备状态：运行状态、健康状态'
|
||
]
|
||
},
|
||
{
|
||
title: '供应商管理',
|
||
text: '在"供应商管理"中维护供应商信息。',
|
||
items: ['供应商名称和编码', '联系方式和地址', '服务范围和产品线', '合同和保修信息']
|
||
},
|
||
{
|
||
title: '批量导入',
|
||
text: '支持通过Excel批量导入设备信息，提高数据录入效率。'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 7,
|
||
title: '工单管理使用指南',
|
||
description: '工单创建、分配、处理、关闭等完整流程说明',
|
||
icon: IconTicket,
|
||
category: 'ticket',
|
||
categoryName: '工单管理',
|
||
updatedAt: '2026-03-14',
|
||
content: [
|
||
{
|
||
title: '工单管理概述',
|
||
text: '工单管理模块提供运维工单的全流程管理，支持故障处理、服务请求、变更管理等场景。'
|
||
},
|
||
{
|
||
title: '创建工单',
|
||
text: '点击"新建工单"按钮，填写工单信息。',
|
||
items: ['选择工单类型', '填写工单标题和描述', '设置优先级', '指定处理人', '关联设备或告警']
|
||
},
|
||
{
|
||
title: '我的工单',
|
||
text: '在"我的工单"中查看分配给当前用户的待处理工单，支持按状态、优先级筛选。'
|
||
},
|
||
{
|
||
title: '所有工单',
|
||
text: '在"所有工单"中查看系统中的全部工单，管理员可进行工单分配和监督。'
|
||
},
|
||
{
|
||
title: '处理工单',
|
||
text: '工单处理流程包括：',
|
||
items: ['查看工单详情', '更新处理进度', '添加处理记录', '转派给其他人员', '关闭工单并填写处理结果']
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 8,
|
||
title: '集群采集配置指南',
|
||
description: '数据库、中间件、网络设备采集配置方法',
|
||
icon: IconDesk,
|
||
category: 'monitor',
|
||
categoryName: '综合监控',
|
||
updatedAt: '2026-03-12',
|
||
content: [
|
||
{
|
||
title: '采集控制中心概述',
|
||
text: '集群采集控制中心用于配置各类IT组件的数据采集，包括数据库、中间件、网络设备等。'
|
||
},
|
||
{
|
||
title: '数据库采集管理',
|
||
text: '在"数据库采集管理"中配置数据库监控采集。',
|
||
items: [
|
||
'支持MySQL、Oracle、SQL Server、PostgreSQL等',
|
||
'配置数据库连接信息',
|
||
'设置采集频率',
|
||
'选择采集指标'
|
||
]
|
||
},
|
||
{
|
||
title: '中间件采集管理',
|
||
text: '在"中间件采集管理"中配置中间件监控采集。',
|
||
items: [
|
||
'支持Tomcat、Nginx、Redis、Kafka等',
|
||
'配置访问地址和认证信息',
|
||
'设置采集参数'
|
||
]
|
||
},
|
||
{
|
||
title: '网络设备采集管理',
|
||
text: '在"网络设备采集管理"中配置网络设备采集。',
|
||
items: [
|
||
'支持SNMP、SSH等采集方式',
|
||
'配置设备IP和认证信息',
|
||
'设置采集协议和频率'
|
||
]
|
||
}
|
||
]
|
||
}
|
||
])
|
||
|
||
// 计算属性
|
||
const filteredFaqs = computed(() => {
|
||
if (activeCategory.value === 'all') {
|
||
return faqs.value
|
||
}
|
||
return faqs.value.filter(faq => faq.category === activeCategory.value)
|
||
})
|
||
|
||
const filteredGuides = computed(() => {
|
||
if (activeCategory.value === 'all') {
|
||
return guides.value
|
||
}
|
||
return guides.value.filter(guide => guide.category === activeCategory.value)
|
||
})
|
||
|
||
// 方法
|
||
const goToHome = () => {
|
||
router.push('/')
|
||
}
|
||
|
||
const goToLogin = () => {
|
||
router.push('/login')
|
||
}
|
||
|
||
const handleCategoryClick = (key: string) => {
|
||
activeCategory.value = key
|
||
}
|
||
|
||
const handleSearch = () => {
|
||
if (searchQuery.value) {
|
||
Message.info(`搜索关键词：${searchQuery.value}`)
|
||
}
|
||
}
|
||
|
||
const openGuideDetail = (guide: any) => {
|
||
currentGuide.value = guide
|
||
guideModalVisible.value = true
|
||
}
|
||
|
||
const openChat = () => {
|
||
Message.info('在线客服功能即将上线')
|
||
}
|
||
|
||
defineExpose({
|
||
guideModalVisible,
|
||
currentGuide
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.help-page {
|
||
min-height: 100vh;
|
||
background: #f5f7fa;
|
||
|
||
// 顶部导航
|
||
.navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 60px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
z-index: 1000;
|
||
|
||
.navbar-content {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
|
||
img {
|
||
height: 32px;
|
||
width: auto;
|
||
}
|
||
|
||
.logo-text {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: var(--color-text-1);
|
||
}
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
|
||
a {
|
||
color: var(--color-text-2);
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
transition: color 0.3s;
|
||
|
||
&:hover {
|
||
color: rgb(var(--primary-6));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Banner 区域
|
||
.help-banner {
|
||
position: relative;
|
||
padding: 140px 24px 80px;
|
||
text-align: center;
|
||
color: #fff;
|
||
|
||
.banner-image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.banner-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.banner-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
|
||
h1 {
|
||
font-size: 42px;
|
||
font-weight: 600;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
p {
|
||
font-size: 18px;
|
||
opacity: 0.9;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.search-box {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
|
||
:deep(.arco-input-wrapper) {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border: none;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
|
||
.arco-input {
|
||
font-size: 16px;
|
||
padding: 12px 16px;
|
||
|
||
&::placeholder {
|
||
color: #86909c;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 主要内容区
|
||
.help-content {
|
||
padding: 40px 24px;
|
||
|
||
.content-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
gap: 32px;
|
||
|
||
@media (max-width: 992px) {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
// 左侧目录
|
||
.help-sidebar {
|
||
width: 240px;
|
||
flex-shrink: 0;
|
||
|
||
@media (max-width: 992px) {
|
||
width: 100%;
|
||
}
|
||
|
||
:deep(.arco-menu) {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
padding: 12px 0;
|
||
|
||
.arco-menu-item {
|
||
margin: 4px 8px;
|
||
border-radius: 6px;
|
||
|
||
&.arco-menu-selected {
|
||
background: rgb(var(--primary-1));
|
||
color: rgb(var(--primary-6));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 右侧内容
|
||
.help-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
}
|
||
|
||
// 帮助区块
|
||
.help-section {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 32px;
|
||
margin-bottom: 24px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: var(--color-text-1);
|
||
margin-bottom: 24px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid var(--color-border-2);
|
||
|
||
svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
color: rgb(var(--primary-6));
|
||
}
|
||
}
|
||
|
||
.section-desc {
|
||
color: var(--color-text-3);
|
||
margin-bottom: 24px;
|
||
}
|
||
}
|
||
|
||
// FAQ 列表
|
||
.faq-list {
|
||
:deep(.arco-collapse) {
|
||
border: none;
|
||
background: transparent;
|
||
|
||
.arco-collapse-item {
|
||
margin-bottom: 12px;
|
||
border: 1px solid var(--color-border-2);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
|
||
.arco-collapse-item-header {
|
||
background: #fafbfc;
|
||
padding: 16px 20px;
|
||
font-weight: 500;
|
||
|
||
&:hover {
|
||
background: #f2f3f5;
|
||
}
|
||
}
|
||
|
||
.arco-collapse-item-content {
|
||
padding: 20px;
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.faq-answer {
|
||
color: var(--color-text-2);
|
||
line-height: 1.8;
|
||
}
|
||
}
|
||
|
||
// 使用指南网格
|
||
.guide-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||
gap: 20px;
|
||
|
||
.guide-card {
|
||
background: #fafbfc;
|
||
border: 1px solid var(--color-border-2);
|
||
border-radius: 8px;
|
||
padding: 24px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
border-color: rgb(var(--primary-6));
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-2px);
|
||
|
||
.view-link {
|
||
color: rgb(var(--primary-6));
|
||
}
|
||
}
|
||
|
||
.guide-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: rgb(var(--primary-1));
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16px;
|
||
|
||
svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
color: rgb(var(--primary-6));
|
||
}
|
||
}
|
||
|
||
h3 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-text-1);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: var(--color-text-3);
|
||
line-height: 1.6;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.guide-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
color: var(--color-text-4);
|
||
margin-bottom: 12px;
|
||
|
||
.guide-category {
|
||
background: rgb(var(--primary-1));
|
||
color: rgb(var(--primary-6));
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.guide-action {
|
||
.view-link {
|
||
font-size: 13px;
|
||
color: var(--color-text-3);
|
||
transition: color 0.3s;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 联系我们
|
||
.contact-section {
|
||
background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
|
||
}
|
||
|
||
.contact-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 20px;
|
||
|
||
.contact-card {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.contact-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: rgb(var(--primary-1));
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
|
||
svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
color: rgb(var(--primary-6));
|
||
}
|
||
}
|
||
|
||
.contact-content {
|
||
flex: 1;
|
||
|
||
h3 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-text-1);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.contact-time {
|
||
font-size: 13px;
|
||
color: var(--color-text-3);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.contact-value {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: rgb(var(--primary-6));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 页脚
|
||
.footer {
|
||
background: #1d2129;
|
||
padding: 24px;
|
||
text-align: center;
|
||
|
||
.footer-content {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
|
||
p {
|
||
color: #86909c;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 使用指南详情弹窗
|
||
.guide-detail-content {
|
||
.guide-detail-header {
|
||
margin-bottom: 24px;
|
||
|
||
.guide-detail-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
|
||
.guide-detail-date {
|
||
font-size: 13px;
|
||
color: var(--color-text-3);
|
||
}
|
||
}
|
||
}
|
||
|
||
.guide-detail-body {
|
||
.content-section {
|
||
margin-bottom: 24px;
|
||
|
||
h3 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--color-text-1);
|
||
margin-bottom: 12px;
|
||
padding-left: 12px;
|
||
border-left: 3px solid rgb(var(--primary-6));
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: var(--color-text-2);
|
||
line-height: 1.8;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
ul {
|
||
margin: 0;
|
||
padding-left: 24px;
|
||
|
||
li {
|
||
font-size: 14px;
|
||
color: var(--color-text-2);
|
||
line-height: 1.8;
|
||
margin-bottom: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.guide-placeholder {
|
||
padding: 40px 0;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|