feat: 添加用户帮助中心
- 新增帮助页面 /help,分类展示使用说明 - 新增用户使用说明文档 - 在个人中心添加帮助入口 **开发规范**:新增功能需同时更新: 1. 模块技术文档 (docs/modules/) 2. 用户使用说明 (frontend/public/docs/) 3. i18n 翻译
This commit is contained in:
@@ -0,0 +1,145 @@
|
||||
# 用户使用指南
|
||||
|
||||
欢迎使用企业工具台!本指南将帮助您快速上手使用系统。
|
||||
|
||||
---
|
||||
|
||||
## 📱 登录方式
|
||||
|
||||
### 飞书内登录(推荐)
|
||||
|
||||
如果您在飞书客户端中打开本应用,系统会自动完成登录,无需输入密码。
|
||||
|
||||
**步骤:**
|
||||
1. 在飞书中打开应用链接
|
||||
2. 系统自动获取您的身份信息
|
||||
3. 自动进入工作台
|
||||
|
||||
### 飞书扫码登录
|
||||
|
||||
如果您在浏览器中打开,可以使用飞书扫码登录。
|
||||
|
||||
**步骤:**
|
||||
1. 点击「飞书扫码登录」按钮
|
||||
2. 打开飞书 APP,扫描二维码
|
||||
3. 在手机上确认登录
|
||||
4. 自动跳转到工作台
|
||||
|
||||
### 邮箱密码登录
|
||||
|
||||
使用企业邮箱和密码登录。
|
||||
|
||||
**步骤:**
|
||||
1. 点击「邮箱密码登录」
|
||||
2. 输入企业邮箱
|
||||
3. 输入密码
|
||||
4. 点击「登录」
|
||||
|
||||
---
|
||||
|
||||
## 🏠 工作台首页
|
||||
|
||||
登录成功后,进入工作台首页,可以看到:
|
||||
|
||||
| 功能 | 说明 |
|
||||
|------|------|
|
||||
| 快捷入口 | 常用功能快速访问 |
|
||||
| 待办事项 | 需要您处理的审批 |
|
||||
| 最新动态 | 最新通知和消息 |
|
||||
|
||||
---
|
||||
|
||||
## ✍️ 出差申请
|
||||
|
||||
### 创建出差申请
|
||||
|
||||
1. 进入「出差申请」页面
|
||||
2. 点击「新建申请」
|
||||
3. 填写出差信息:
|
||||
- **出差事由**:简要说明出差目的
|
||||
- **出差行程**:添加一个或多个行程
|
||||
- 出发城市
|
||||
- 目的城市
|
||||
- 出发日期
|
||||
- 返回日期
|
||||
- 是否需要住宿
|
||||
- **审批人**:选择需要审批的人员
|
||||
- **抄送人**:(可选)选择需要通知的人员
|
||||
4. 点击「提交审批」
|
||||
|
||||
### 编辑出差申请
|
||||
|
||||
**仅草稿状态的申请可以编辑:**
|
||||
1. 在列表中找到草稿申请
|
||||
2. 点击进入详情
|
||||
3. 修改内容
|
||||
4. 点击「保存」或「提交审批」
|
||||
|
||||
### 撤销申请
|
||||
|
||||
**未被审批的申请可以撤销:**
|
||||
1. 进入申请详情页
|
||||
2. 点击「撤销申请」
|
||||
3. 确认撤销
|
||||
|
||||
---
|
||||
|
||||
## 📋 审批流程
|
||||
|
||||
### 待我审批
|
||||
|
||||
查看需要您审批的申请:
|
||||
|
||||
1. 进入「审批」页面
|
||||
2. 点击「待我审批」标签
|
||||
3. 点击申请查看详情
|
||||
4. 选择操作:
|
||||
- **通过**:批准申请
|
||||
- **拒绝**:拒绝申请(可填写原因)
|
||||
|
||||
### 我发起的
|
||||
|
||||
查看您提交的所有申请及其状态。
|
||||
|
||||
### 我已审批
|
||||
|
||||
查看您已处理的审批记录。
|
||||
|
||||
---
|
||||
|
||||
## 👤 个人中心
|
||||
|
||||
### 修改密码
|
||||
|
||||
1. 进入「修改密码」页面
|
||||
2. 输入原密码
|
||||
3. 输入新密码
|
||||
4. 确认新密码
|
||||
5. 点击「确认修改」
|
||||
|
||||
### 语言设置
|
||||
|
||||
支持切换语言:
|
||||
- 🇨🇳 简体中文
|
||||
- 🇺🇸 English
|
||||
- 🇷🇺 Русский
|
||||
- 🇪🇸 Español
|
||||
- 🇫🇷 Français
|
||||
|
||||
---
|
||||
|
||||
## 💡 常见问题
|
||||
|
||||
### Q: 忘记密码怎么办?
|
||||
A: 请联系管理员重置密码,或使用飞书扫码登录。
|
||||
|
||||
### Q: 出差申请提交后可以修改吗?
|
||||
A: 草稿状态可以修改,已提交的申请无法修改,只能撤销后重新提交。
|
||||
|
||||
### Q: 审批拒绝后怎么办?
|
||||
A: 可以联系审批人了解原因,或重新提交申请。
|
||||
|
||||
---
|
||||
|
||||
**版本**: 1.0.0
|
||||
**更新日期**: 2026-02-28
|
||||
@@ -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; }
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user