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="dashboard">
              <template #icon><IconDashboard /></template>
              仪表盘
            </a-menu-item>
            <a-menu-item key="alert">
              <template #icon><IconAlertCircle /></template>
              告警管理
            </a-menu-item>
            <a-menu-item key="datacenter">
              <template #icon><IconDatabase /></template>
              数据中心
            </a-menu-item>
            <a-menu-item key="report">
              <template #icon><IconChartLine /></template>
              报表分析
            </a-menu-item>
            <a-menu-item key="system">
              <template #icon><IconSettings /></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="viewGuideDetail(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>
            </div>
          </section>

          <!-- 操作手册 -->
          <section class="help-section">
            <h2 class="section-title">
              <IconFile />
              操作手册
            </h2>
            
            <div class="manual-list">
              <div
                v-for="manual in manuals"
                :key="manual.id"
                class="manual-item"
              >
                <div class="manual-icon">
                  <IconDownload />
                </div>
                <div class="manual-info">
                  <h3>{{ manual.title }}</h3>
                  <p>{{ manual.description }}</p>
                  <div class="manual-meta">
                    <span>格式：{{ manual.format }}</span>
                    <span>大小：{{ manual.size }}</span>
                    <span>更新：{{ manual.updatedAt }}</span>
                  </div>
                </div>
                <a-button type="primary" @click="downloadManual(manual)">
                  下载
                </a-button>
              </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-XXX-XXXX</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">support@example.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>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  IconSearch,
  IconList,
  IconRocket,
  IconDashboard,
  IconAlertCircle,
  IconDatabase,
  IconChartLine,
  IconSettings,
  IconHelp,
  IconBook,
  IconFile,
  IconDownload,
  IconHeadset,
  IconPhone,
  IconMail,
  IconMessage,
} from '@tabler/icons-vue'

const router = useRouter()
const searchQuery = ref('')
const activeCategory = ref('all')

// FAQ 数据
const faqs = ref([
  {
    question: '如何登录系统？',
    answer: '在登录页面输入您的用户名和密码，点击登录按钮即可。如果忘记密码，可以点击"忘记密码"链接进行重置。',
    category: 'quickstart'
  },
  {
    question: '如何查看监控仪表盘？',
    answer: '登录后，在左侧菜单点击"仪表盘" -> "工作台"即可查看实时监控仪表盘。您可以根据需要切换不同的视图和筛选条件。',
    category: 'dashboard'
  },
  {
    question: '如何配置告警策略？',
    answer: '进入"告警管理" -> "告警策略"页面，点击"新建策略"按钮，填写相关配置信息，包括告警条件、通知方式等，保存后即可生效。',
    category: 'alert'
  },
  {
    question: '如何添加新的机房？',
    answer: '在"数据中心" -> "机房管理"页面，点击"新增机房"按钮，填写机房名称、位置、面积等信息，完成后点击保存。',
    category: 'datacenter'
  },
  {
    question: '如何导出报表数据？',
    answer: '在相应的报表页面，选择需要导出的时间范围和数据类型，点击右上角的"导出"按钮，选择导出格式（Excel/PDF），即可下载报表文件。',
    category: 'report'
  },
  {
    question: '如何修改个人信息？',
    answer: '点击右上角的用户头像，选择"个人设置"，可以修改您的个人信息、密码、联系方式等。修改后记得点击保存。',
    category: 'system'
  },
  {
    question: '系统支持哪些浏览器？',
    answer: '系统支持主流的现代浏览器，包括 Chrome、Firefox、Edge、Safari 等。建议使用最新版本的浏览器以获得最佳体验。',
    category: 'system'
  },
  {
    question: '遇到技术问题如何反馈？',
    answer: '您可以通过以下方式反馈问题：1. 拨打技术支持热线；2. 发送邮件至 support@example.com；3. 使用在线客服功能。',
    category: 'system'
  }
])

// 使用指南数据
const guides = ref([
  {
    id: 1,
    title: '新手入门指南',
    description: '帮助您快速了解系统的基本功能和操作流程',
    icon: IconRocket,
    category: 'quickstart',
    categoryName: '快速入门',
    updatedAt: '2026-03-15'
  },
  {
    id: 2,
    title: '仪表盘使用详解',
    description: '详细介绍仪表盘的各个功能模块和使用技巧',
    icon: IconDashboard,
    category: 'dashboard',
    categoryName: '仪表盘',
    updatedAt: '2026-03-18'
  },
  {
    id: 3,
    title: '告警配置完整教程',
    description: '从基础到高级的告警策略配置方法',
    icon: IconAlertCircle,
    category: 'alert',
    categoryName: '告警管理',
    updatedAt: '2026-03-20'
  },
  {
    id: 4,
    title: '机房设备管理手册',
    description: '机房、机柜、设备等资源的规范管理方法',
    icon: IconDatabase,
    category: 'datacenter',
    categoryName: '数据中心',
    updatedAt: '2026-03-19'
  },
  {
    id: 5,
    title: '数据报表生成指南',
    description: '学习如何生成和导出各类业务报表',
    icon: IconChartLine,
    category: 'report',
    categoryName: '报表分析',
    updatedAt: '2026-03-17'
  },
  {
    id: 6,
    title: '系统权限管理说明',
    description: '用户角色和权限配置的详细讲解',
    icon: IconSettings,
    category: 'system',
    categoryName: '系统设置',
    updatedAt: '2026-03-16'
  }
])

// 操作手册数据
const manuals = ref([
  {
    id: 1,
    title: '系统用户手册（完整版）',
    description: '包含系统所有功能的详细说明和操作步骤',
    format: 'PDF',
    size: '5.2 MB',
    updatedAt: '2026-03-01'
  },
  {
    id: 2,
    title: '快速入门指南',
    description: '快速上手指南，适合新用户阅读',
    format: 'PDF',
    size: '1.8 MB',
    updatedAt: '2026-03-01'
  },
  {
    id: 3,
    title: '运维管理规范',
    description: '标准化的运维操作流程和规范文档',
    format: 'Word',
    size: '2.5 MB',
    updatedAt: '2026-02-28'
  },
  {
    id: 4,
    title: '常见问题汇编',
    description: '汇总了常见问题及解决方案',
    format: 'PDF',
    size: '3.1 MB',
    updatedAt: '2026-03-10'
  }
])

// 计算属性
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 = () => {
  // 实现搜索逻辑
  console.log('搜索:', searchQuery.value)
}

const viewGuideDetail = (guide: any) => {
  // 查看指南详情
  console.log('查看指南:', guide)
}

const downloadManual = (manual: any) => {
  // 下载手册
  console.log('下载手册:', manual)
}

const openChat = () => {
  // 打开在线客服
  console.log('打开在线客服')
}
</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;
    overflow: hidden;

    .banner-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .banner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
      z-index: 1;
    }

    .banner-content {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
      z-index: 2;

      h1 {
        font-size: 48px;
        font-weight: 700;
        margin-bottom: 16px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }

      p {
        font-size: 18px;
        margin-bottom: 40px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }

      .search-box {
        max-width: 600px;
        margin: 0 auto;

        :deep(.arco-input) {
          background: #fff;
          border: none;
          font-size: 16px;

          &::placeholder {
            color: var(--color-text-3);
          }
        }
      }
    }
  }
  
  // 主要内容区
  .help-content {
    padding: 40px 24px;
    
    .content-container {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 32px;
    }
    
    .help-sidebar {
      position: sticky;
      top: 100px;
      height: fit-content;
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      :deep(.arco-menu) {
        background: transparent;
        
        .arco-menu-item {
          border-radius: 4px;
          margin-bottom: 8px;
          
          &.arco-menu-selected {
            background: rgb(var(--primary-1));
            color: rgb(var(--primary-6));
          }
          
          &:hover:not(.arco-menu-selected) {
            background: var(--color-fill-2);
          }
        }
      }
    }
    
    .help-main {
      .help-section {
        margin-bottom: 48px;
        
        .section-title {
          font-size: 24px;
          font-weight: 600;
          color: var(--color-text-1);
          margin-bottom: 24px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        
        // FAQ 样式
        .faq-list {
          :deep(.arco-collapse) {
            border: none;
            
            .arco-collapse-item {
              border: 1px solid var(--color-border);
              border-radius: 8px;
              margin-bottom: 16px;
              
              .arco-collapse-item-header {
                padding: 16px 20px;
                background: var(--color-fill-1);
                font-weight: 500;
              }
              
              .arco-collapse-item-content {
                padding: 20px;
                line-height: 1.8;
                color: var(--color-text-2);
              }
            }
          }
        }
        
        // 指南网格
        .guide-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 24px;
          
          .guide-card {
            background: #fff;
            border: 1px solid var(--color-border);
            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(-4px);
            }
            
            .guide-icon {
              width: 48px;
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgb(var(--primary-1));
              border-radius: 8px;
              color: rgb(var(--primary-6));
              font-size: 24px;
              margin-bottom: 16px;
            }
            
            h3 {
              font-size: 18px;
              font-weight: 600;
              color: var(--color-text-1);
              margin-bottom: 8px;
            }
            
            p {
              font-size: 14px;
              color: var(--color-text-2);
              line-height: 1.6;
              margin-bottom: 16px;
            }
            
            .guide-meta {
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              color: var(--color-text-3);
              
              .guide-category {
                background: var(--color-fill-2);
                padding: 2px 8px;
                border-radius: 4px;
              }
            }
          }
        }
        
        // 手册列表
        .manual-list {
          .manual-item {
            display: flex;
            align-items: center;
            gap: 20px;
            background: #fff;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 16px;
            transition: all 0.3s;
            
            &:hover {
              border-color: rgb(var(--primary-6));
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            }
            
            .manual-icon {
              width: 48px;
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgb(var(--success-1));
              border-radius: 8px;
              color: rgb(var(--success-6));
              font-size: 24px;
            }
            
            .manual-info {
              flex: 1;
              
              h3 {
                font-size: 16px;
                font-weight: 600;
                color: var(--color-text-1);
                margin-bottom: 8px;
              }
              
              p {
                font-size: 14px;
                color: var(--color-text-2);
                margin-bottom: 12px;
              }
              
              .manual-meta {
                display: flex;
                gap: 16px;
                font-size: 12px;
                color: var(--color-text-3);
              }
            }
          }
        }
        
        // 联系我们
        .contact-section {
          text-align: center;

          .section-desc {
            font-size: 16px;
            color: var(--color-text-2);
            margin-bottom: 32px;
          }

          .contact-cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 24px;

            .contact-card {
              background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
              border: 1px solid var(--color-border);
              border-radius: 16px;
              padding: 24px;
              transition: all 0.3s;
              flex: 1 1 300px;
              max-width: 360px;
              min-width: 280px;
              display: flex;
              align-items: center;
              gap: 20px;

              &:hover {
                border-color: rgb(var(--primary-6));
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
                transform: translateY(-4px);
              }

              .contact-icon {
                width: 56px;
                height: 56px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, rgb(var(--primary-6)) 0%, rgb(var(--primary-5)) 100%);
                border-radius: 12px;
                color: #fff;
                flex-shrink: 0;
                transition: all 0.3s;

                svg {
                  width: 28px;
                  height: 28px;
                }
              }

              &:hover .contact-icon {
                transform: scale(1.05);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
              }

              .contact-content {
                flex: 1;
                text-align: left;

                h3 {
                  font-size: 16px;
                  font-weight: 600;
                  color: var(--color-text-1);
                  margin-bottom: 8px;
                }

                .contact-time {
                  font-size: 13px;
                  color: var(--color-text-3);
                  margin-bottom: 6px;
                }

                .contact-value {
                  font-size: 15px;
                  font-weight: 600;
                  color: rgb(var(--primary-6));
                }

                .arco-btn {
                  margin-top: 8px;
                }
              }
            }
          }
        }
      }
    }
  }
  
  // 页脚
  .footer {
    background: var(--color-bg-1);
    padding: 24px;
    text-align: center;
    border-top: 1px solid var(--color-border);
    
    .footer-content {
      max-width: 1400px;
      margin: 0 auto;
      
      p {
        font-size: 14px;
        color: var(--color-text-3);
      }
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .help-page {
    .help-content {
      .content-container {
        grid-template-columns: 1fr;
      }
      
      .help-sidebar {
        position: static;
        margin-bottom: 24px;
      }
    }
  }
}

@media (max-width: 768px) {
  .help-page {
    .navbar {
      .navbar-content {
        .nav-links {
          gap: 12px;
          
          a {
            display: none;
          }
        }
      }
    }
    
    .help-banner {
      padding: 100px 16px 60px;
      
      .banner-content {
        h1 {
          font-size: 32px !important;
        }
        
        p {
          font-size: 16px !important;
        }
      }
    }
    
    .help-content {
      padding: 24px 16px;
      
      .guide-grid {
        grid-template-columns: 1fr;
      }
      
      .contact-cards {
        flex-direction: column;
        align-items: center;

        .contact-card {
          max-width: 100%;
          flex: 1 1 100%;
          flex-direction: column;
          text-align: center;

          .contact-content {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>