ops/front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat

Browse Source
This commit is contained in:
daxiong
2026-05-02 09:59:06 +08:00
parent ea3e60c17c
commit 1af4075e9b
249 changed files with 11209 additions and 14884 deletions
Download Patch File Download Diff File Expand all files Collapse all files

384
src/views/help/index.vue
View File

@@ -87,15 +87,12 @@
<IconHelp />
常见问题
</h2>
<div class="faq-list">
<a-collapse>
<a-collapse-item
v-for="(item, index) in filteredFaqs"
:key="index"
>
<a-collapse-item v-for="(item, index) in filteredFaqs" :key="index">
<template #header>
<div style="padding-left: 20px;">{{ item.question }}</div>
<div style="padding-left: 20px">{{ item.question }}</div>
</template>
<div class="faq-answer">
{{ item.answer }}
@@ -111,14 +108,9 @@
<IconBook />
使用指南
</h2>
<div class="guide-grid">
<div
v-for="guide in filteredGuides"
:key="guide.id"
class="guide-card"
@click="openGuideDetail(guide)"
>
<div v-for="guide in filteredGuides" :key="guide.id" class="guide-card" @click="openGuideDetail(guide)">
<div class="guide-icon">
<component :is="guide.icon" />
</div>
@@ -165,7 +157,6 @@
<p class="contact-value">david.yan@qq.com</p>
</div>
</div>
</div>
</section>
</div>
@@ -180,13 +171,7 @@
</footer>
<!-- 使用指南详情弹窗 -->
<a-modal
v-model:visible="guideModalVisible"
:title="currentGuide?.title"
:width="800"
:footer="false"
unmount-on-close
>
<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">
@@ -246,84 +231,100 @@ const currentGuide = ref<any>(null)
const faqs = ref([
{
question: '如何登录智能运维管理系统？',
answer: '在登录页面输入您的用户名和密码，点击登录按钮即可。如果忘记密码，可以点击"忘记密码"链接进行重置，或联系系统管理员协助重置密码。',
category: 'quickstart'
answer:
'在登录页面输入您的用户名和密码，点击登录按钮即可。如果忘记密码，可以点击"忘记密码"链接进行重置，或联系系统管理员协助重置密码。',
category: 'quickstart',
},
{
question: '如何查看服务器和PC设备的运行状态？',
answer: '登录系统后，进入"服务器及PC管理"菜单，可以查看服务器管理和办公PC管理两个子模块。在列表中可以查看设备的在线状态、资源使用情况等详细信息。',
category: 'quickstart'
answer:
'登录系统后，进入"服务器及PC管理"菜单，可以查看服务器管理和办公PC管理两个子模块。在列表中可以查看设备的在线状态、资源使用情况等详细信息。',
category: 'quickstart',
},
{
question: '如何配置监控告警策略？',
answer: '进入"告警管理" -> "告警策略管理"页面，点击"新建策略"按钮，选择监控对象类型、设置告警条件、通知方式和接收人员，保存后即可生效。系统支持多种告警通知渠道，包括邮件、短信、企业微信等。',
category: 'alert'
answer:
'进入"告警管理" -> "告警策略管理"页面，点击"新建策略"按钮，选择监控对象类型、设置告警条件、通知方式和接收人员，保存后即可生效。系统支持多种告警通知渠道，包括邮件、短信、企业微信等。',
category: 'alert',
},
{
question: '告警触发后如何处理？',
answer: '当告警触发时，进入"告警管理" -> "告警受理处理"页面，可以查看待处理的告警列表。点击具体告警记录，可以查看详细信息并进行受理、转派或关闭操作。处理完成后，告警记录会保存在告警历史中供后续查询。',
category: 'alert'
answer:
'当告警触发时，进入"告警管理" -> "告警受理处理"页面，可以查看待处理的告警列表。点击具体告警记录，可以查看详细信息并进行受理、转派或关闭操作。处理完成后，告警记录会保存在告警历史中供后续查询。',
category: 'alert',
},
{
question: '如何查看网络设备的监控数据？',
answer: '进入"综合监控" -> "网络设备监控"页面，可以查看所有网络设备的实时监控数据，包括设备状态、端口流量、CPU/内存使用率等。支持按设备类型、IP地址等条件筛选，也可以设置监控阈值。',
category: 'monitor'
answer:
'进入"综合监控" -> "网络设备监控"页面，可以查看所有网络设备的实时监控数据，包括设备状态、端口流量、CPU/内存使用率等。支持按设备类型、IP地址等条件筛选，也可以设置监控阈值。',
category: 'monitor',
},
{
question: '如何查看存储设备的运行状态？',
answer: '进入"综合监控" -> "存储设备监控"页面，可以查看存储设备的容量使用情况、IOPS、吞吐量等关键指标。系统支持多种存储品牌和型号的自动发现和监控。',
category: 'monitor'
answer:
'进入"综合监控" -> "存储设备监控"页面，可以查看存储设备的容量使用情况、IOPS、吞吐量等关键指标。系统支持多种存储品牌和型号的自动发现和监控。',
category: 'monitor',
},
{
question: '如何管理数据中心的机柜信息？',
answer: '进入"数据中心管理" -> "机柜管理"页面，可以添加、编辑、删除机柜信息。支持查看机柜内的设备分布、U位使用情况，以及机柜的电力和制冷状态。还可以通过可视化界面查看机柜布局。',
category: 'datacenter'
answer:
'进入"数据中心管理" -> "机柜管理"页面，可以添加、编辑、删除机柜信息。支持查看机柜内的设备分布、U位使用情况，以及机柜的电力和制冷状态。还可以通过可视化界面查看机柜布局。',
category: 'datacenter',
},
{
question: '如何添加新的数据中心和楼层？',
answer: '在"数据中心管理"模块中，先在"数据中心"页面添加数据中心基本信息，然后在"楼层管理"页面添加该数据中心的楼层信息。添加完成后，可以在机柜管理中关联具体位置。',
category: 'datacenter'
answer:
'在"数据中心管理"模块中，先在"数据中心"页面添加数据中心基本信息，然后在"楼层管理"页面添加该数据中心的楼层信息。添加完成后，可以在机柜管理中关联具体位置。',
category: 'datacenter',
},
{
question: '如何查看网络拓扑图？',
answer: '进入"网络架构管理" -> "拓扑管理"页面，可以查看和管理网络拓扑图。系统支持自动发现网络设备并生成拓扑图，也可以手动编辑拓扑结构。"自动感知拓扑图"功能可以实时更新网络拓扑变化。',
category: 'netarch'
answer:
'进入"网络架构管理" -> "拓扑管理"页面，可以查看和管理网络拓扑图。系统支持自动发现网络设备并生成拓扑图，也可以手动编辑拓扑结构。"自动感知拓扑图"功能可以实时更新网络拓扑变化。',
category: 'netarch',
},
{
question: '如何进行IP地址管理？',
answer: '进入"网络架构管理" -> "IP地址管理"页面，可以查看和管理IP地址池。支持IP地址分配、回收、冲突检测等功能，可以按子网、VLAN等维度进行管理。',
category: 'netarch'
answer:
'进入"网络架构管理" -> "IP地址管理"页面，可以查看和管理IP地址池。支持IP地址分配、回收、冲突检测等功能，可以按子网、VLAN等维度进行管理。',
category: 'netarch',
},
{
question: '如何添加新的资产设备？',
answer: '进入"资产管理" -> "设备管理"页面，点击"新增设备"按钮，填写设备基本信息（名称、型号、IP地址等）、选择设备分类、关联供应商信息，保存后即可完成添加。也可以通过批量导入功能一次性添加多台设备。',
category: 'asset'
answer:
'进入"资产管理" -> "设备管理"页面，点击"新增设备"按钮，填写设备基本信息（名称、型号、IP地址等）、选择设备分类、关联供应商信息，保存后即可完成添加。也可以通过批量导入功能一次性添加多台设备。',
category: 'asset',
},
{
question: '如何管理设备供应商信息？',
answer: '在"资产管理" -> "供应商管理"页面，可以添加和维护供应商信息，包括供应商名称、联系方式、服务范围等。设备管理时可以关联供应商，便于后续的维保管理。',
category: 'asset'
answer:
'在"资产管理" -> "供应商管理"页面，可以添加和维护供应商信息，包括供应商名称、联系方式、服务范围等。设备管理时可以关联供应商，便于后续的维保管理。',
category: 'asset',
},
{
question: '如何创建和处理工单？',
answer: '进入"工单管理"模块，可以创建新工单或处理待办工单。在"我的工单"中查看分配给自己的工单，在"所有工单"中查看全部工单。支持工单的创建、分配、处理、转派、关闭等完整流程。',
category: 'ticket'
answer:
'进入"工单管理"模块，可以创建新工单或处理待办工单。在"我的工单"中查看分配给自己的工单，在"所有工单"中查看全部工单。支持工单的创建、分配、处理、转派、关闭等完整流程。',
category: 'ticket',
},
{
question: '如何配置数据库和中间件的采集？',
answer: '进入"集群采集控制中心"模块，在"数据库采集管理"或"中间件采集管理"页面，可以配置需要监控的数据库和中间件实例。填写连接信息后，系统会自动采集性能指标和运行状态。',
category: 'monitor'
answer:
'进入"集群采集控制中心"模块，在"数据库采集管理"或"中间件采集管理"页面，可以配置需要监控的数据库和中间件实例。填写连接信息后，系统会自动采集性能指标和运行状态。',
category: 'monitor',
},
{
question: '如何查看可视化大屏？',
answer: '进入"可视化大屏管理"模块，可以查看和管理运维大屏。在"大屏管理"中创建和编辑大屏，在"已发布大屏列表"中查看已发布的大屏。大屏可以展示监控概览、告警统计、资源使用等关键指标。',
category: 'quickstart'
answer:
'进入"可视化大屏管理"模块，可以查看和管理运维大屏。在"大屏管理"中创建和编辑大屏，在"已发布大屏列表"中查看已发布的大屏。大屏可以展示监控概览、告警统计、资源使用等关键指标。',
category: 'quickstart',
},
{
question: '系统支持哪些浏览器？',
answer: '智能运维管理系统支持主流的现代浏览器，包括 Chrome（推荐）、Firefox、Edge、Safari 等。建议使用最新版本的浏览器以获得最佳体验，屏幕分辨率建议 1920x1080 及以上。',
category: 'quickstart'
}
answer:
'智能运维管理系统支持主流的现代浏览器，包括 Chrome（推荐）、Firefox、Edge、Safari 等。建议使用最新版本的浏览器以获得最佳体验，屏幕分辨率建议 1920x1080 及以上。',
category: 'quickstart',
},
])
// 使用指南数据 - 包含详细内容
@@ -339,12 +340,12 @@ const guides = ref([
content: [
{
title: '系统概述',
text: '智能运维管理系统是一套集监控、告警、资产管理、工单处理于一体的综合运维平台，旨在帮助运维人员高效管理IT基础设施。'
text: '智能运维管理系统是一套集监控、告警、资产管理、工单处理于一体的综合运维平台，旨在帮助运维人员高效管理IT基础设施。',
},
{
title: '登录系统',
text: '打开浏览器访问系统地址，输入用户名和密码登录。首次登录建议修改默认密码，确保账户安全。',
items: ['支持多种认证方式', '支持单点登录(SSO)', '支持密码找回功能']
items: ['支持多种认证方式', '支持单点登录(SSO)', '支持密码找回功能'],
},
{
title: '主要功能模块',
@@ -359,14 +360,14 @@ const guides = ref([
'告警管理：告警策略、告警处理、告警历史',
'工单管理：创建和处理运维工单',
'数据中心管理：机房、楼层、机柜管理',
'资产管理：设备分类、设备信息、供应商管理'
]
'资产管理：设备分类、设备信息、供应商管理',
],
},
{
title: '界面导航',
text: '左侧为功能菜单，点击展开子菜单；顶部显示当前页面标题和用户信息；右侧为内容区域，展示具体功能页面。'
}
]
text: '左侧为功能菜单，点击展开子菜单；顶部显示当前页面标题和用户信息；右侧为内容区域，展示具体功能页面。',
},
],
},
{
id: 2,
@@ -379,29 +380,29 @@ const guides = ref([
content: [
{
title: '监控概述',
text: '综合监控模块提供对IT基础设施的全方位监控，包括网络设备、存储设备、安全设备、虚拟化平台、环境动力等。'
text: '综合监控模块提供对IT基础设施的全方位监控，包括网络设备、存储设备、安全设备、虚拟化平台、环境动力等。',
},
{
title: '网络设备监控',
text: '进入"综合监控" -> "网络设备监控"，可以查看路由器、交换机、防火墙等网络设备的运行状态。',
items: ['实时查看设备在线状态', '监控端口流量和带宽使用', '查看CPU、内存使用率', '配置监控阈值和告警']
items: ['实时查看设备在线状态', '监控端口流量和带宽使用', '查看CPU、内存使用率', '配置监控阈值和告警'],
},
{
title: '存储设备监控',
text: '进入"综合监控" -> "存储设备监控"，监控存储阵列、NAS等存储设备。',
items: ['查看存储容量和使用率', '监控IOPS和吞吐量', '查看磁盘健康状态', '支持主流存储品牌']
items: ['查看存储容量和使用率', '监控IOPS和吞吐量', '查看磁盘健康状态', '支持主流存储品牌'],
},
{
title: '虚拟化监控',
text: '进入"综合监控" -> "虚拟化监控"，监控VMware、Hyper-V等虚拟化平台。',
items: ['查看虚拟机运行状态', '监控资源分配和使用', '查看宿主机性能指标']
items: ['查看虚拟机运行状态', '监控资源分配和使用', '查看宿主机性能指标'],
},
{
title: '环境动力监控',
text: '进入"综合监控" -> "电力/UPS/空调/温湿度"，监控机房环境。',
items: ['UPS状态和电池容量', '空调运行状态', '温湿度实时数据', '电力负载情况']
}
]
items: ['UPS状态和电池容量', '空调运行状态', '温湿度实时数据', '电力负载情况'],
},
],
},
{
id: 3,
@@ -414,32 +415,32 @@ const guides = ref([
content: [
{
title: '告警体系概述',
text: '告警管理模块提供完整的告警生命周期管理，从告警策略配置、告警触发、告警通知到告警处理和归档。'
text: '告警管理模块提供完整的告警生命周期管理，从告警策略配置、告警触发、告警通知到告警处理和归档。',
},
{
title: '告警级别管理',
text: '系统预设多个告警级别（紧急、重要、一般、提示），可在"告警级别管理"中自定义级别名称和颜色标识。'
text: '系统预设多个告警级别（紧急、重要、一般、提示），可在"告警级别管理"中自定义级别名称和颜色标识。',
},
{
title: '告警模版配置',
text: '在"告警模版"中创建告警规则模版，定义监控指标、阈值条件、告警级别等。',
items: ['选择监控对象类型', '设置指标和阈值条件', '配置告警级别', '设置静默时间']
items: ['选择监控对象类型', '设置指标和阈值条件', '配置告警级别', '设置静默时间'],
},
{
title: '告警策略管理',
text: '在"告警策略管理"中将模版应用到具体设备或设备组，并配置通知方式。',
items: ['选择告警模版', '指定监控对象', '配置通知渠道', '设置通知接收人']
items: ['选择告警模版', '指定监控对象', '配置通知渠道', '设置通知接收人'],
},
{
title: '告警受理处理',
text: '在"告警受理处理"中查看和处理触发的告警。',
items: ['查看告警详情', '受理告警并标记处理状态', '转派给其他人员', '添加处理备注', '关闭告警']
items: ['查看告警详情', '受理告警并标记处理状态', '转派给其他人员', '添加处理备注', '关闭告警'],
},
{
title: '告警历史查询',
text: '在"告警历史"中查询历史告警记录，支持按时间、设备、级别等条件筛选。'
}
]
text: '在"告警历史"中查询历史告警记录，支持按时间、设备、级别等条件筛选。',
},
],
},
{
id: 4,
@@ -452,28 +453,28 @@ const guides = ref([
content: [
{
title: '数据中心管理概述',
text: '数据中心管理模块用于管理机房基础设施信息，包括数据中心、楼层、机柜的层级管理。'
text: '数据中心管理模块用于管理机房基础设施信息，包括数据中心、楼层、机柜的层级管理。',
},
{
title: '数据中心信息管理',
text: '在"数据中心"页面管理数据中心基本信息。',
items: ['数据中心名称和编码', '地理位置和地址', '总面积和可用面积', '负责人和联系方式']
items: ['数据中心名称和编码', '地理位置和地址', '总面积和可用面积', '负责人和联系方式'],
},
{
title: '楼层管理',
text: '在"楼层管理"页面添加数据中心下的楼层信息。',
items: ['楼层编号和名称', '楼层面积', '功能区域划分']
items: ['楼层编号和名称', '楼层面积', '功能区域划分'],
},
{
title: '机柜管理',
text: '在"机柜管理"页面管理机柜信息，支持可视化机柜布局。',
items: ['机柜编号和位置', '机柜规格（高度、宽度）', 'U位使用情况', '机柜内设备列表', '电力和制冷状态']
items: ['机柜编号和位置', '机柜规格（高度、宽度）', 'U位使用情况', '机柜内设备列表', '电力和制冷状态'],
},
{
title: '机柜可视化',
text: '点击机柜可查看机柜内部设备分布图，直观展示U位占用情况，支持设备上架、下架操作。'
}
]
text: '点击机柜可查看机柜内部设备分布图，直观展示U位占用情况，支持设备上架、下架操作。',
},
],
},
{
id: 5,
@@ -486,28 +487,28 @@ const guides = ref([
content: [
{
title: '网络架构管理概述',
text: '网络架构管理模块提供网络拓扑可视化、流量分析、IP地址管理等功能，帮助运维人员全面掌握网络架构。'
text: '网络架构管理模块提供网络拓扑可视化、流量分析、IP地址管理等功能，帮助运维人员全面掌握网络架构。',
},
{
title: '拓扑管理',
text: '在"拓扑管理"中创建和管理网络拓扑图。',
items: ['手动创建拓扑图', '自动发现网络拓扑', '编辑设备连接关系', '设置拓扑图展示样式']
items: ['手动创建拓扑图', '自动发现网络拓扑', '编辑设备连接关系', '设置拓扑图展示样式'],
},
{
title: '自动感知拓扑图',
text: '系统可自动发现网络设备及其连接关系，生成动态拓扑图，实时反映网络架构变化。'
text: '系统可自动发现网络设备及其连接关系，生成动态拓扑图，实时反映网络架构变化。',
},
{
title: '流量分析管理',
text: '在"流量分析管理"中查看网络流量数据。',
items: ['查看端口流量统计', '分析流量趋势', '识别流量异常', '生成流量报表']
items: ['查看端口流量统计', '分析流量趋势', '识别流量异常', '生成流量报表'],
},
{
title: 'IP地址管理',
text: '在"IP地址管理"中管理IP地址资源。',
items: ['IP地址池管理', 'IP分配和回收', 'IP冲突检测', '子网划分管理']
}
]
items: ['IP地址池管理', 'IP分配和回收', 'IP冲突检测', '子网划分管理'],
},
],
},
{
id: 6,
@@ -520,12 +521,12 @@ const guides = ref([
content: [
{
title: '资产管理概述',
text: '资产管理模块用于管理IT资产的全生命周期，包括设备分类、设备信息、供应商管理等。'
text: '资产管理模块用于管理IT资产的全生命周期，包括设备分类、设备信息、供应商管理等。',
},
{
title: '设备分类管理',
text: '在"设备分类管理"中建立设备分类体系。',
items: ['创建分类树形结构', '设置分类属性模板', '关联监控类型']
items: ['创建分类树形结构', '设置分类属性模板', '关联监控类型'],
},
{
title: '设备管理',
@@ -535,19 +536,19 @@ const guides = ref([
'设备位置：数据中心、楼层、机柜、U位',
'设备配置：IP地址、操作系统、配置参数',
'维保信息：购买日期、保修期限、供应商',
'设备状态：运行状态、健康状态'
]
'设备状态：运行状态、健康状态',
],
},
{
title: '供应商管理',
text: '在"供应商管理"中维护供应商信息。',
items: ['供应商名称和编码', '联系方式和地址', '服务范围和产品线', '合同和保修信息']
items: ['供应商名称和编码', '联系方式和地址', '服务范围和产品线', '合同和保修信息'],
},
{
title: '批量导入',
text: '支持通过Excel批量导入设备信息，提高数据录入效率。'
}
]
text: '支持通过Excel批量导入设备信息，提高数据录入效率。',
},
],
},
{
id: 7,
@@ -560,27 +561,27 @@ const guides = ref([
content: [
{
title: '工单管理概述',
text: '工单管理模块提供运维工单的全流程管理，支持故障处理、服务请求、变更管理等场景。'
text: '工单管理模块提供运维工单的全流程管理，支持故障处理、服务请求、变更管理等场景。',
},
{
title: '创建工单',
text: '点击"新建工单"按钮，填写工单信息。',
items: ['选择工单类型', '填写工单标题和描述', '设置优先级', '指定处理人', '关联设备或告警']
items: ['选择工单类型', '填写工单标题和描述', '设置优先级', '指定处理人', '关联设备或告警'],
},
{
title: '我的工单',
text: '在"我的工单"中查看分配给当前用户的待处理工单，支持按状态、优先级筛选。'
text: '在"我的工单"中查看分配给当前用户的待处理工单，支持按状态、优先级筛选。',
},
{
title: '所有工单',
text: '在"所有工单"中查看系统中的全部工单，管理员可进行工单分配和监督。'
text: '在"所有工单"中查看系统中的全部工单，管理员可进行工单分配和监督。',
},
{
title: '处理工单',
text: '工单处理流程包括：',
items: ['查看工单详情', '更新处理进度', '添加处理记录', '转派给其他人员', '关闭工单并填写处理结果']
}
]
items: ['查看工单详情', '更新处理进度', '添加处理记录', '转派给其他人员', '关闭工单并填写处理结果'],
},
],
},
{
id: 8,
@@ -593,38 +594,25 @@ const guides = ref([
content: [
{
title: '采集控制中心概述',
text: '集群采集控制中心用于配置各类IT组件的数据采集，包括数据库、中间件、网络设备等。'
text: '集群采集控制中心用于配置各类IT组件的数据采集，包括数据库、中间件、网络设备等。',
},
{
title: '数据库采集管理',
text: '在"数据库采集管理"中配置数据库监控采集。',
items: [
'支持MySQL、Oracle、SQL Server、PostgreSQL等',
'配置数据库连接信息',
'设置采集频率',
'选择采集指标'
]
items: ['支持MySQL、Oracle、SQL Server、PostgreSQL等', '配置数据库连接信息', '设置采集频率', '选择采集指标'],
},
{
title: '中间件采集管理',
text: '在"中间件采集管理"中配置中间件监控采集。',
items: [
'支持Tomcat、Nginx、Redis、Kafka等',
'配置访问地址和认证信息',
'设置采集参数'
]
items: ['支持Tomcat、Nginx、Redis、Kafka等', '配置访问地址和认证信息', '设置采集参数'],
},
{
title: '网络设备采集管理',
text: '在"网络设备采集管理"中配置网络设备采集。',
items: [
'支持SNMP、SSH等采集方式',
'配置设备IP和认证信息',
'设置采集协议和频率'
]
}
]
}
items: ['支持SNMP、SSH等采集方式', '配置设备IP和认证信息', '设置采集协议和频率'],
},
],
},
])
// 计算属性
@@ -632,14 +620,14 @@ const filteredFaqs = computed(() => {
if (activeCategory.value === 'all') {
return faqs.value
}
return faqs.value.filter(faq => faq.category === activeCategory.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)
return guides.value.filter((guide) => guide.category === activeCategory.value)
})
// 方法
@@ -668,7 +656,7 @@ const openGuideDetail = (guide: any) => {
defineExpose({
guideModalVisible,
currentGuide
currentGuide,
})
</script>
@@ -676,7 +664,7 @@ defineExpose({
.help-page {
min-height: 100vh;
background: #f5f7fa;
// 顶部导航
.navbar {
position: fixed;
@@ -688,7 +676,7 @@ defineExpose({
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;
@@ -697,36 +685,36 @@ defineExpose({
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));
}
@@ -734,14 +722,14 @@ defineExpose({
}
}
}
// Banner 区域
.help-banner {
position: relative;
padding: 140px 24px 80px;
text-align: center;
color: #fff;
.banner-image {
position: absolute;
top: 0;
@@ -750,7 +738,7 @@ defineExpose({
height: 100%;
object-fit: cover;
}
.banner-overlay {
position: absolute;
top: 0;
@@ -758,37 +746,37 @@ defineExpose({
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;
}
@@ -797,41 +785,41 @@ defineExpose({
}
}
}
// 主要内容区
.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));
@@ -839,14 +827,14 @@ defineExpose({
}
}
}
// 右侧内容
.help-main {
flex: 1;
min-width: 0;
}
}
// 帮助区块
.help-section {
background: #fff;
@@ -854,7 +842,7 @@ defineExpose({
padding: 32px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
.section-title {
display: flex;
align-items: center;
@@ -865,61 +853,61 @@ defineExpose({
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);
@@ -927,17 +915,17 @@ defineExpose({
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;
@@ -947,35 +935,35 @@ defineExpose({
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));
@@ -983,7 +971,7 @@ defineExpose({
border-radius: 4px;
}
}
.guide-action {
.view-link {
font-size: 13px;
@@ -993,17 +981,17 @@ defineExpose({
}
}
}
// 联系我们
.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;
@@ -1013,12 +1001,12 @@ defineExpose({
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;
@@ -1028,30 +1016,30 @@ defineExpose({
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;
@@ -1060,45 +1048,45 @@ defineExpose({
}
}
}
// 页脚
.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;
@@ -1107,18 +1095,18 @@ defineExpose({
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);
@@ -1127,7 +1115,7 @@ defineExpose({
}
}
}
.guide-placeholder {
padding: 40px 0;
text-align: center;