Merge feature/mzl-dev: 添加用户帮助中心

frontend/public/docs/user-guide.md

@@ -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

frontend/src/pages/help/help.module.css

@@ -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; }

frontend/src/pages/help/index.tsx

@@ -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>
+  )
+}