root
105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
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: 'login',
|
|
title: '登录方式',
|
|
icon: '🔐',
|
|
content: [
|
|
{ q: '飞书内登录', a: '在飞书客户端中打开应用，系统会自动完成登录。' },
|
|
{ q: '飞书扫码登录', a: '点击「飞书扫码登录」，用飞书 APP 扫码确认登录。' },
|
|
{ q: '邮箱密码登录', a: '使用企业邮箱和密码登录系统。' }
|
|
]
|
|
},
|
|
{
|
|
key: 'business-trip',
|
|
title: '出差申请',
|
|
icon: '✈️',
|
|
content: [
|
|
{ q: '如何创建申请？', a: '进入「出差申请」，点击「新建申请」，填写信息后提交审批。' },
|
|
{ q: '草稿可以编辑吗？', a: '可以。草稿状态可以随时编辑修改。' },
|
|
{ q: '如何撤销申请？', a: '进入申请详情页，点击「撤销申请」确认即可。' }
|
|
]
|
|
},
|
|
{
|
|
key: 'approval',
|
|
title: '审批流程',
|
|
icon: '📋',
|
|
content: [
|
|
{ q: '如何审批？', a: '进入「审批」页面，选择申请查看详情，点击「通过」或「拒绝」。' },
|
|
{ q: '查看我的申请？', a: '在「审批」页面点击「我发起的」标签查看。' }
|
|
]
|
|
},
|
|
{
|
|
key: 'profile',
|
|
title: '个人中心',
|
|
icon: '👤',
|
|
content: [
|
|
{ q: '如何修改密码？', a: '进入「修改密码」页面，输入原密码和新密码，点击「确认修改」即可。' },
|
|
{ q: '支持哪些语言？', a: '系统支持简体中文、English、Русский、Español、Français 五种语言，可在首页或个人中心切换。' }
|
|
]
|
|
},
|
|
{
|
|
key: 'faq',
|
|
title: '常见问题',
|
|
icon: '💡',
|
|
content: [
|
|
{ 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>
|
|
)
|
|
}
|