xinyouhe/x-server-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 添加HTML版本用户使用说明文档

Browse Source 
- 美观的渐变色设计
- 移动端适配
- 图文并茂，通俗易懂
- 不包含不存在的功能
- 内联CSS，可直接独立访问
This commit is contained in:
root
2026-02-28 12:04:16 +08:00
parent 02dede2bd0
commit 283a087c6f
1 changed files with 522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/docs/user-guide.html
+522
View File
@@ -0,0 +1,522 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>企业工具台 - 使用指南</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
background: #f5f5f5;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
color: white;
margin-bottom: 24px;
}
.header h1 {
font-size: 28px;
margin-bottom: 8px;
font-weight: 600;
}
.header p {
font-size: 14px;
opacity: 0.9;
}
.section {
background: white;
border-radius: 12px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.section-title {
font-size: 20px;
font-weight: 600;
color: #262626;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
.section-title .icon {
font-size: 24px;
}
.content-title {
font-size: 16px;
font-weight: 500;
color: #262626;
margin: 18px 0 12px;
}
.step-list {
list-style: none;
padding: 0;
}
.step-item {
display: flex;
gap: 12px;
margin-bottom: 12px;
align-items: flex-start;
}
.step-number {
width: 24px;
height: 24px;
background: #1677ff;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
}
.step-text {
flex: 1;
font-size: 14px;
color: #595959;
line-height: 1.5;
}
.info-box {
background: #f0f5ff;
border-left: 4px solid #1677ff;
padding: 12px 16px;
border-radius: 8px;
margin: 16px 0;
}
.info-box.warning {
background: #fffbe6;
border-left-color: #faad14;
}
.info-box-title {
font-weight: 600;
color: #262626;
margin-bottom: 4px;
}
.info-box-text {
font-size: 13px;
color: #595959;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin: 16px 0;
}
.card {
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 8px;
padding: 16px;
text-align: center;
}
.card-icon {
font-size: 32px;
margin-bottom: 8px;
}
.card-title {
font-size: 14px;
font-weight: 500;
color: #262626;
margin-bottom: 4px;
}
.card-desc {
font-size: 12px;
color: #8c8c8c;
}
.status-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.status-pending {
background: #fff1f0;
color: #ff4d4f;
}
.status-approved {
background: #f6ffed;
color: #52c41a;
}
.status-rejected {
background: #fff2f0;
color: #ff4d4f;
}
.divider {
height: 1px;
background: #f0f0f0;
margin: 24px 0;
}
.faq-item {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px dashed #f0f0f0;
}
.faq-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.faq-question {
font-size: 15px;
font-weight: 500;
color: #262626;
margin-bottom: 8px;
}
.faq-answer {
font-size: 14px;
color: #595959;
line-height: 1.6;
}
.footer {
text-align: center;
padding: 24px 20px;
color: #8c8c8c;
font-size: 13px;
}
.contact-info {
background: #f5f5f5;
border-radius: 8px;
padding: 16px;
text-align: center;
font-size: 14px;
}
.contact-info a {
color: #1677ff;
text-decoration: none;
}
.highlight {
background: #fff7e6;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
@media (max-width: 480px) {
.container {
padding: 12px;
}
.section {
padding: 16px;
}
.header {
padding: 24px 16px;
}
.header h1 {
font-size: 22px;
}
.section-title {
font-size: 18px;
}
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="header">
<h1>📘 企业工具台</h1>
<p>欢迎使用！以下是使用说明</p>
</div>
<!-- 快速开始 -->
<div class="section">
<div class="section-title">
<span class="icon">🚀</span>
快速开始
</div>
<p style="color: #595959; font-size: 14px; margin-bottom: 16px;">
打开系统后会自动登录，您将看到工作台首页。首页提供了常用功能的快捷入口。
</p>
<div class="grid">
<div class="card">
<div class="card-icon">✈️</div>
<div class="card-title">出差申请</div>
<div class="card-desc">提交出差审批</div>
</div>
<div class="card">
<div class="card-icon">📋</div>
<div class="card-title">审批</div>
<div class="card-desc">处理待办事项</div>
</div>
</div>
</div>
<!-- 登录方式 -->
<div class="section">
<div class="section-title">
<span class="icon">📱</span>
如何登录
</div>
<div class="content-title">1. 飞书内登录（推荐）</div>
<ul class="step-list">
<li class="step-item">
<span class="step-number">1</span>
<span class="step-text">在飞书客户端中打开应用链接</span>
</li>
<li class="step-item">
<span class="step-number">2</span>
<span class="step-text">系统自动获取您的身份，无需输入密码</span>
</li>
</ul>
<div class="content-title">2. 飞书扫码登录</div>
<ul class="step-list">
<li class="step-item">
<span class="step-number">1</span>
<span class="step-text">点击「飞书扫码登录」按钮</span>
</li>
<li class="step-item">
<span class="step-number">2</span>
<span class="step-text">用飞书 APP 扫描二维码</span>
</li>
<li class="step-item">
<span class="step-number">3</span>
<span class="step-text">在手机上点击确认</span>
</li>
</ul>
</div>
<!-- 出差申请 -->
<div class="section">
<div class="section-title">
<span class="icon">✈️</span>
出差申请
</div>
<div class="content-title">如何创建出差申请</div>
<ul class="step-list">
<li class="step-item">
<span class="step-number">1</span>
<span class="step-text">点击首页的「出差申请」图标</span>
</li>
<li class="step-item">
<span class="step-number">2</span>
<span class="step-text">点击「新建申请」</span>
</li>
<li class="step-item">
<span class="step-number">3</span>
span class="step-text">填写出差事由，添加行程（出发地、目的地、日期）</span>
</li>
<li class="step-item">
<span class="step-number">4</span>
<span class="step-text">选择审批人</span>
</li>
<li class="step-item">
<span class="step-number">5</span>
<span class="step-text">点击「提交审批」</span>
</li>
</ul>
<div class="info-box">
<div class="info-box-title">💡 小提示</div>
<div class="info-box-text">
• 草稿状态的申请可以随时编辑<br>
• 已提交的申请只能撤销后重新提交
</div>
</div>
</div>
<!-- 审批流程 -->
<div class="section">
<div class="section-title">
<span class="icon">📋</span>
审批流程
</div>
<div class="content-title">审批状态说明</div>
<div class="grid">
<div class="card">
<div class="status-badge status-pending">待审批</div>
<p style="font-size: 12px; color: #595959; margin-top: 8px;">
等待审批人处理
</p>
</div>
<div class="card">
<div class="status-badge status-approved">已通过</div>
<p style="font-size: 12px; color: #595959; margin-top: 8px;">
申请已获批准
</p>
</div>
<div class="card">
<div class="status-badge status-rejected">已拒绝</div>
<p style="font-size: 12px; color: #595959; margin-top: 8px;">
申请被拒绝
</p>
</div>
</div>
<div class="content-title" style="margin-top: 24px;">如何审批</div>
<ul class="step-list">
<li class="step-item">
<span class="step-number">1</span>
<span class="step-text">进入「审批」页面</span>
</li>
<li class="step-item">
<span class="step-number">2</span>
<span class="step-text">点击「待我审批」标签</span>
</li>
<li class="step-item">
<span class="step-number">3</span>
<span class="step-text">选择一个申请，查看详情</span>
</li>
<li class="step-item">
<span class="step-number">4</span>
<span class="step-text">点击「通过」或「拒绝」</span>
</li>
</ul>
</div>
<!-- 个人中心 -->
<div class="section">
<div class="section-title">
<span class="icon">👤</span>
个人中心
</div>
<div class="content-title">修改密码</div>
<ul class="step-list">
<li class="step-item">
<span class="step-number">1</span>
<span class="step-text">在个人中心点击「修改密码」</span>
</li>
<li class="step-item">
<span class="step-number">2</span>
<span class="step-text">输入原密码</span>
</li>
<li class="step-item">
<span class="step-number">3</span>
<span class="step-text">输入新密码两次</span>
</li>
<li class="step-item">
<span class="step-number">4</span>
<span class="step-text">点击「确认修改」</span>
</li>
</ul>
<div class="content-title" style="margin-top: 24px;">切换语言</div>
<p style="color: #595959; font-size: 14px;">
支持 <span class="highlight">🇨🇳 简体中文</span>、
<span class="highlight">🇺🇸 English</span>、
<span class="highlight">🇷🇺 Русский</span>、
<span class="highlight">🇪🇸 Español</span>、
<span class="highlight">🇫🇷 Français</span>
</p>
<p style="color: #8c8c8c; font-size: 13px; margin-top: 8px;">
点击首页右上角的国旗图标即可切换语言
</p>
</div>
<!-- 常见问题 -->
<div class="section">
<div class="section-title">
<span class="icon">💡</span>
常见问题
</div>
<div class="faq-item">
<div class="faq-question">Q: 忘记密码怎么办？</div>
<div class="faq-answer">A: 请联系管理员重置密码，或使用飞书扫码登录。</div>
</div>
<div class="faq-item">
<div class="faq-question">Q: 出差申请提交后可以修改吗？</div>
<div class="faq-answer">A: 草稿状态可以修改，已提交的申请无法修改，只能撤销后重新提交。</div>
</div>
<div class="faq-item">
<div class="faq-question">Q: 审批被拒绝了怎么办？</div>
<div class="faq-answer">A: 可以联系审批人了解拒绝原因，或重新提交申请。</div>
</div>
<div class="faq-item">
<div class="faq-question">Q: 如何查看使用帮助？</div>
<div class="faq-answer">A: 在个人中心点击「帮助中心」即可查看此说明。</div>
</div>
</div>
<!-- 联系信息 -->
<div class="section">
<div class="section-title">
<span class="icon">📞</span>
联系支持
</div>
<div class="contact-info">
如有问题或建议，请联系：<br><br>
<strong>技术支持：</strong> <a href="mailto:support@example.com">support@example.com</a><br><br>
<strong>管理员：</strong> <a href="mailto:admin@example.com">admin@example.com</a>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<p>版本 1.0.0 · 更新于 2026年2月</p>
<p style="margin-top: 8px; font-size: 12px; color: #bfbfbf;">
© 2026 企业工具台 · 企业内部使用
</p>
</div>
</div>
</body>
</html>