front/src/views/help/index.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>&copy; 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>