feat: 添加用户帮助中心

- 新增帮助页面 /help,分类展示使用说明
- 新增用户使用说明文档
- 在个人中心添加帮助入口

**开发规范**:新增功能需同时更新:
1. 模块技术文档 (docs/modules/)
2. 用户使用说明 (frontend/public/docs/)
3. i18n 翻译
This commit is contained in:
root
2026-02-28 11:49:02 +08:00
parent e3fa7e86f3
commit 13e963e012
3 changed files with 255 additions and 0 deletions
+16
View File
@@ -0,0 +1,16 @@
.help { min-height: 100vh; background: #f5f5f5; padding-bottom: 20px; }
.content { padding: 12px; }
.quickLinks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.quickLink { display: flex; align-items: center; background: white; border-radius: 12px; padding: 16px; text-decoration: none; color: inherit; }
.quickLinkIcon { font-size: 32px; margin-right: 12px; }
.quickLinkText { flex: 1; }
.quickLinkTitle { font-size: 16px; font-weight: 500; color: #333; }
.quickLinkDesc { font-size: 13px; color: #999; margin-top: 4px; }
.sections { display: flex; flex-direction: column; gap: 16px; }
.section { background: white; border-radius: 12px; overflow: hidden; }
.sectionHeader { display: flex; align-items: center; padding: 16px; background: #fafafa; border-bottom: 1px solid #f0f0f0; }
.sectionIcon { font-size: 20px; margin-right: 8px; }
.sectionTitle { font-size: 15px; font-weight: 500; color: #333; }
.panel { border-bottom: 1px solid #f0f0f0; }
.answer { padding: 12px 16px; font-size: 14px; color: #666; line-height: 1.6; background: #fafafa; }
.footer { margin-top: 24px; text-align: center; color: #999; font-size: 13px; }
+94
View File
@@ -0,0 +1,94 @@
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: 'faq',
title: '常见问题',
icon: '💡',
content: [
{ 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>
)
}