x-server-mobile/frontend/src/pages/help/index.tsx

import { useState } from 'react'
import { NavBar, Collapse } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
import styles from './help.module.css'

const guideSections = [
  {
    key: 'entry',
    title: '系统入口',
    icon: '📱',
    content: [
      { q: '如何进入系统？', a: '在飞书中搜索「UniService」，有两种形式：点击「应用」图标可直接进入；点击「机器人」→选择菜单「工作台」进入。' },
      { q: 'PC端如何使用？', a: '在PC端飞书中打开时，系统会在浏览器中打开，支持邮箱密码登录和飞书扫码登录。' }
    ]
  },
  {
    key: 'login',
    title: '登录方式',
    icon: '🔐',
    content: [
      { q: '邮箱密码登录的默认密码是什么？', a: '默认密码是您的 SN 编号（员工工号）。例如：李佳博的 SN 是 885690，默认密码就是 885690。' },
      { q: '如何修改密码？', a: '进入「系统设置」→「修改密码」，输入旧密码和新密码即可修改。' },
      { q: '忘记密码怎么办？', a: '请联系管理员重置密码，或使用飞书扫码登录。' },
      { q: '飞书扫码登录', a: '点击页面上的「扫码登录」按钮，使用飞书手机端扫描二维码，确认授权后即可完成登录。' }
    ]
  },
  {
    key: 'features',
    title: '系统功能',
    icon: '🏠',
    content: [
      { q: '快捷入口有哪些？', a: '出差申请、采购申请、备货录入。其中采购申请和备货录入正在开发中。' },
      { q: '所有应用有哪些？', a: '审批（查看待办、进行审批）、数据统计（开发中）、系统设置（修改密码、语言切换）。' }
    ]
  },
  {
    key: 'business-trip',
    title: '出差申请',
    icon: '✈️',
    content: [
      { q: '如何创建出差申请？', a: '进入「出差申请」页面，填写出差事由，添加行程信息（时间、出发地、目的地、交通工具等），选择审批人和抄送人，点击「提交」。' },
      { q: '草稿可以编辑吗？', a: '可以。草稿状态可以随时编辑修改，系统会自动保存。' },
      { q: '如何撤销申请？', a: '在「我发起的」列表中找到对应申请，点击进入详情页，如状态为"审批中"可点击「撤销」。' },
      { q: '往返行程需要填写结束日期吗？', a: '是的。往返行程必须填写结束日期，否则无法提交。' }
    ]
  },
  {
    key: 'approval',
    title: '审批流程',
    icon: '📋',
    content: [
      { q: '如何审批？', a: '审批人会收到飞书卡片消息通知，可在卡片上直接点击「通过」或「拒绝」，也可进入系统详情页进行审批。' },
      { q: '查看我的申请？', a: '在「审批」页面点击「我发起的」标签查看所有自己提交的申请。' },
      { q: '待我审批在哪里？', a: '在「审批」页面点击「待我审批」标签查看需要处理的审批事项。' },
      { q: '如何查看已审批记录？', a: '在「审批」页面点击「我已审批」标签查看已经处理过的审批记录。' }
    ]
  },
  {
    key: 'settings',
    title: '系统设置',
    icon: '⚙️',
    content: [
      { q: '如何修改密码？', a: '进入「系统设置」→「修改密码」，输入原密码和新密码，点击「确认修改」即可。' },
      { q: '支持哪些语言？', a: '系统支持简体中文、English、Русский、Español、Français 五种语言。' },
      { q: '如何切换语言？', a: '点击首页右上角的国旗图标，或进入「系统设置」→「语言设置」进行切换。' }
    ]
  },
  {
    key: 'faq',
    title: '常见问题',
    icon: '💡',
    content: [
      { q: '为什么有些功能显示"系统开发中"？', a: '系统正在逐步完善中，更多功能将陆续上线。' },
      { q: '审批消息在哪里查看？', a: '审批消息会通过飞书卡片消息推送到您的飞书，点击卡片即可直接处理。' },
      { q: '如何联系技术支持？', a: '如有问题，请联系系统管理员。' }
    ]
  }
]

export default function Help() {
  const [activeKey, setActiveKey] = useState<string[]>([])

  return (
    <div className={styles.help}>
      <NavBar backArrow>帮助中心</NavBar>
      <div className={styles.content}>
        <div className={styles.quickLinks}>
          <a href="/docs/USER_GUIDE.md" target="_blank" className={styles.quickLink}>
            <div className={styles.quickLinkIcon}>📖</div>
            <div className={styles.quickLinkText}>
              <div className={styles.quickLinkTitle}>用户手册</div>
              <div className={styles.quickLinkDesc}>查看完整使用说明</div>
            </div>
            <RightOutline />
          </a>
          <a href="mailto:support@example.com" className={styles.quickLink}>
            <div className={styles.quickLinkIcon}>📧</div>
            <div className={styles.quickLinkText}>
              <div className={styles.quickLinkTitle}>联系客服</div>
              <div className={styles.quickLinkDesc}>support@example.com</div>
            </div>
            <RightOutline />
          </a>
        </div>
        <div className={styles.sections}>
          {guideSections.map(section => (
            <div key={section.key} className={styles.section}>
              <div className={styles.sectionHeader}>
                <span className={styles.sectionIcon}>{section.icon}</span>
                <span className={styles.sectionTitle}>{section.title}</span>
              </div>
              <Collapse activeKey={activeKey} onChange={setActiveKey}>
                {section.content.map((item, index) => (
                  <Collapse.Panel key={`${section.key}-${index}`} title={item.q} className={styles.panel}>
                    <div className={styles.answer}>{item.a}</div>
                  </Collapse.Panel>
                ))}
              </Collapse>
            </div>
          ))}
        </div>
        <div className={styles.footer}>
          <div className={styles.version}>版本 1.0.0</div>
        </div>
      </div>
    </div>
  )
}