adfa0af825
### 详细变更：
1. **文档与配置**：更新AGENTS.md添加命令超时约束，升级Rive依赖至0.14.7并替换平台插件引用
2. **UI优化**：重构AppInfo页面布局、移除图表冗余配置、锁定部分系统设置项
3. **功能增强**：
- 新增工具面板拖拽状态管理与介绍弹窗
- 新增进度页面编辑/重排/清空用户进度功能
- 新增摇一摇路由作用域拦截逻辑
4. **体验优化**：
- 统一外部链接跳转弹窗，添加文件打开确认逻辑
- 修复设备卡片IP溢出、Android权限声明问题
- 后台任务初始化增加协议校验
5. **代码重构**：拆分工具面板配置、拖拽逻辑与动画参数，优化状态管理代码
6. **工具脚本**：新增协议文件上传脚本
531 lines
19 KiB
HTML
531 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>新手指引 - 闲言APP</title>
|
||
<style>
|
||
:root {
|
||
--primary: #6C5CE7;
|
||
--primary-light: #A29BFE;
|
||
--primary-dark: #5A4BD1;
|
||
--bg: #F2F2F7;
|
||
--bg-card: #FFFFFF;
|
||
--text: #1C1C1E;
|
||
--text-secondary: #8E8E93;
|
||
--text-tertiary: #AEAEB2;
|
||
--border: #E5E5EA;
|
||
--highlight-bg: rgba(108, 92, 231, 0.08);
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
|
||
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
|
||
--radius-sm: 8px;
|
||
--radius-md: 12px;
|
||
--radius-lg: 16px;
|
||
--radius-xl: 20px;
|
||
--font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: var(--font-family);
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.8;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
.lang-switch {
|
||
position: fixed;
|
||
top: 16px;
|
||
right: 16px;
|
||
z-index: 100;
|
||
display: flex;
|
||
background: rgba(255,255,255,0.85);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-radius: 20px;
|
||
padding: 3px;
|
||
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
||
border: 0.5px solid rgba(108, 92, 231, 0.15);
|
||
}
|
||
.lang-btn {
|
||
padding: 6px 14px;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
border-radius: 17px;
|
||
transition: all 0.25s ease;
|
||
font-family: var(--font-family);
|
||
}
|
||
.lang-btn.active {
|
||
background: var(--primary);
|
||
color: #FFF;
|
||
box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
|
||
}
|
||
.lang-btn:hover:not(.active) {
|
||
background: rgba(108, 92, 231, 0.08);
|
||
color: var(--primary);
|
||
}
|
||
.header {
|
||
background: linear-gradient(135deg, #6C5CE7 0%, #5A4BD1 50%, #4A3DB5 100%);
|
||
padding: 48px 20px 44px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
|
||
pointer-events: none;
|
||
}
|
||
.header::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 32px;
|
||
background: var(--bg);
|
||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||
}
|
||
.header-icon { font-size: 40px; margin-bottom: 10px; display: block; }
|
||
.header h1 { color: #FFF; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 4px; }
|
||
.header p { color: rgba(255,255,255,0.75); font-size: 14px; }
|
||
.container { max-width: 800px; margin: 0 auto; padding: 20px 16px 40px; }
|
||
.content-card {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-lg);
|
||
padding: 28px 24px;
|
||
margin-bottom: 20px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
h1 {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
margin: 28px 0 12px;
|
||
}
|
||
h2 {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
margin: 32px 0 16px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid var(--primary);
|
||
display: inline-block;
|
||
}
|
||
h3 {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
margin: 24px 0 12px;
|
||
}
|
||
p {
|
||
font-size: 15px;
|
||
color: var(--text);
|
||
margin-bottom: 12px;
|
||
line-height: 1.8;
|
||
}
|
||
p.note {
|
||
background: rgba(108, 92, 231, 0.06);
|
||
border-left: 3px solid var(--primary);
|
||
padding: 12px 16px;
|
||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||
margin: 12px 0;
|
||
}
|
||
.highlight {
|
||
color: var(--primary);
|
||
font-weight: 600;
|
||
background: var(--highlight-bg);
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
}
|
||
.copyright-cert {
|
||
margin: 20px 0;
|
||
text-align: center;
|
||
padding: 20px;
|
||
background: rgba(108, 92, 231, 0.04);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid rgba(108, 92, 231, 0.12);
|
||
}
|
||
.cert-image {
|
||
max-width: 100%;
|
||
max-height: 500px;
|
||
border-radius: var(--radius-sm);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
.cert-caption {
|
||
margin-top: 12px;
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 16px;
|
||
}
|
||
li {
|
||
font-size: 15px;
|
||
color: var(--text);
|
||
padding: 6px 0 6px 20px;
|
||
position: relative;
|
||
line-height: 1.7;
|
||
}
|
||
li::before {
|
||
content: '\2022';
|
||
color: var(--primary);
|
||
font-weight: 700;
|
||
position: absolute;
|
||
left: 4px;
|
||
top: 6px;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 16px 0;
|
||
font-size: 14px;
|
||
}
|
||
th {
|
||
background: var(--primary);
|
||
color: #FFF;
|
||
padding: 10px 12px;
|
||
text-align: left;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
td {
|
||
padding: 10px 12px;
|
||
border-bottom: 0.5px solid var(--border);
|
||
line-height: 1.6;
|
||
}
|
||
tr:hover td {
|
||
background: rgba(108, 92, 231, 0.04);
|
||
}
|
||
.back-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
padding: 12px 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.back-link:hover { opacity: 0.7; }
|
||
.footer {
|
||
text-align: center;
|
||
padding: 24px 20px 40px;
|
||
color: var(--text-secondary);
|
||
font-size: 13px;
|
||
line-height: 1.8;
|
||
border-top: 0.5px solid var(--border);
|
||
margin-top: 20px;
|
||
}
|
||
.footer .company { font-weight: 500; color: var(--text); margin-bottom: 4px; }
|
||
@media (max-width: 640px) {
|
||
.lang-switch { top: 10px; right: 10px; }
|
||
.lang-btn { padding: 5px 10px; font-size: 12px; }
|
||
.header { padding: 40px 16px 36px; }
|
||
.header h1 { font-size: 20px; }
|
||
.container { padding: 16px 12px 32px; }
|
||
.content-card { padding: 20px 16px; }
|
||
h2 { font-size: 18px; }
|
||
h3 { font-size: 16px; }
|
||
p, li { font-size: 14px; }
|
||
table { font-size: 12px; }
|
||
th, td { padding: 8px 6px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="lang-switch">
|
||
<button class="lang-btn active" onclick="switchLang('zh')" id="btn-zh">中文</button>
|
||
<button class="lang-btn" onclick="switchLang('en')" id="btn-en">EN</button>
|
||
</div>
|
||
|
||
<div class="header">
|
||
<span class="header-icon">📖</span>
|
||
<h1 id="header-title">新手指引</h1>
|
||
<p id="header-subtitle">功能导览与操作指引</p>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="content-card">
|
||
<div id="content-zh" class="lang-content">
|
||
<p><strong>闲言APP</strong> 新手指引</p>
|
||
<p>更新日期：2026年5月20日</p>
|
||
<p>欢迎来到<strong>闲言APP</strong>！这份指引将帮助你快速上手，发现文字的美妙世界。</p>
|
||
<h2>一、快速开始</h2>
|
||
<h3>1.1 注册与登录</h3>
|
||
<ul>
|
||
<li>打开应用，点击"登录/注册"</li>
|
||
<li>支持手机号、邮箱注册，也可使用第三方账号快捷登录</li>
|
||
<li>首次登录后建议完善个人资料</li>
|
||
</ul>
|
||
<h3>1.2 首页浏览</h3>
|
||
<ul>
|
||
<li>首页展示每日精选句子</li>
|
||
<li>左右滑动切换不同类型的句子</li>
|
||
<li>点击句子可查看详情、收藏、分享</li>
|
||
</ul>
|
||
<h3>1.3 发现更多</h3>
|
||
<ul>
|
||
<li>点击底部"发现"标签，浏览分类内容</li>
|
||
<li>搜索功能可快速查找感兴趣的句子或诗词</li>
|
||
</ul>
|
||
<h2>二、核心功能指引</h2>
|
||
<h3>2.1 收藏与稍后读</h3>
|
||
<ul>
|
||
<li>看到喜欢的句子，点击❤️收藏</li>
|
||
<li>长按句子可添加到"稍后阅读"列表</li>
|
||
<li>在"我的 → 收藏"中查看所有收藏内容</li>
|
||
</ul>
|
||
<h3>2.2 卡片创作</h3>
|
||
<ul>
|
||
<li>点击创作按钮，选择卡片模板</li>
|
||
<li>自定义文字、背景、字体样式</li>
|
||
<li>完成后可保存到相册或分享给朋友</li>
|
||
</ul>
|
||
<h3>2.3 每日签到</h3>
|
||
<ul>
|
||
<li>每天打开应用即可签到</li>
|
||
<li>连续签到获得额外积分奖励</li>
|
||
<li>积分可用于解锁专属内容</li>
|
||
</ul>
|
||
<h3>2.4 AI智能助手（规划中）</h3>
|
||
<ul>
|
||
<li>在"发现"页找到AI工具入口（开发中）</li>
|
||
<li>支持智能对话、OCR识别、汉字查询等（开发中）</li>
|
||
<li>每日免费使用次数，会员无限制</li>
|
||
</ul>
|
||
<h2>三、个性化设置</h2>
|
||
<h3>3.1 主题定制</h3>
|
||
<ul>
|
||
<li>我的 → 主题个性化</li>
|
||
<li>选择预设主题或自定义颜色</li>
|
||
<li>调整字体大小、粗细、样式</li>
|
||
<li>设置毛玻璃效果强度</li>
|
||
</ul>
|
||
<h3>3.2 深色模式</h3>
|
||
<ul>
|
||
<li>支持日间、夜间、纯黑三种模式</li>
|
||
<li>可设置为跟随系统自动切换</li>
|
||
<li>支持定时深色模式</li>
|
||
</ul>
|
||
<h3>3.3 通知设置</h3>
|
||
<ul>
|
||
<li>设置每日推荐推送时间</li>
|
||
<li>自定义通知类型</li>
|
||
<li>签到提醒开关</li>
|
||
</ul>
|
||
<h2>四、进阶功能</h2>
|
||
<h3>4.1 文件传输助手</h3>
|
||
<ul>
|
||
<li>在"发现"页找到文件传输入口</li>
|
||
<li>扫码或搜索附近设备</li>
|
||
<li>支持图片、文档、视频等多种格式</li>
|
||
<li>局域网高速传输，无需流量</li>
|
||
</ul>
|
||
<h3>4.2 笔记管理</h3>
|
||
<ul>
|
||
<li>点击"+"创建新笔记</li>
|
||
<li>支持富文本编辑</li>
|
||
<li>可添加标签分类管理</li>
|
||
</ul>
|
||
<h3>4.3 阅读报告</h3>
|
||
<ul>
|
||
<li>自动记录阅读数据</li>
|
||
<li>生成周报/月报</li>
|
||
<li>查看阅读热力图和趋势</li>
|
||
</ul>
|
||
<h3>4.4 番茄钟</h3>
|
||
<ul>
|
||
<li>设置专注时长</li>
|
||
<li>专注期间屏蔽通知</li>
|
||
<li>完成后获得积分奖励</li>
|
||
</ul>
|
||
<h2>五、常见问题</h2>
|
||
<h3>5.1 如何修改个人信息？</h3>
|
||
<p>我的 → 点击头像区域 → 编辑资料</p>
|
||
<h3>5.2 如何导出数据？</h3>
|
||
<p>设置 → 数据管理 → 数据导出</p>
|
||
<h3>5.3 如何清除缓存？</h3>
|
||
<p>我的 → 缓存管理 → 清除缓存</p>
|
||
<h3>5.4 如何反馈问题？</h3>
|
||
<p>我的 → 关于 → 用户反馈</p>
|
||
<h3>5.5 忘记密码怎么办？</h3>
|
||
<p>登录页 → 忘记密码 → 通过手机号/邮箱重置</p>
|
||
<h3>5.6 如何注销账号？</h3>
|
||
<p>设置 → 账户设置 → 注销账号</p>
|
||
<h2>六、小贴士</h2>
|
||
<p>💡 每天签到可获得积分，连续签到奖励更多</p>
|
||
<p>💡 长按句子可快速收藏或分享</p>
|
||
<p>💡 开启通知推送，不错过每日精选</p>
|
||
<p>💡 使用深色模式，夜间阅读更舒适</p>
|
||
<p>💡 定期备份数据，避免意外丢失</p>
|
||
<h2>七、获取帮助</h2>
|
||
<p>如在使用过程中遇到任何问题，可通过以下方式获取帮助：</p>
|
||
<ul>
|
||
<li>应用内反馈：我的 → 关于 → 用户反馈</li>
|
||
<li>邮箱：2821981550@qq.com</li>
|
||
<li>在关于页面查看常见问题</li>
|
||
</ul>
|
||
<h2>八、法律声明</h2>
|
||
<p>使用<strong>闲言APP</strong>即表示您同意我们的《用户服务协议》和《隐私政策》。详细的法律条款和隐私保护说明，请查阅应用内"关于 → 软件协议"中的相关文档。</p>
|
||
</div>
|
||
<div id="content-en" class="lang-content" style="display:none;">
|
||
<p><strong>Xianyan APP</strong> — Beginner's Guide</p>
|
||
<p>Version: V6.5</p>
|
||
<p>Updated: May 20, 2026</p>
|
||
<h2>I. Getting Started</h2>
|
||
<h3>1.1 Download and Install</h3>
|
||
<ul>
|
||
<li>Search for "Xianyan" in the App Store or Google Play</li>
|
||
<li>Download and install the app</li>
|
||
<li>Open the app to start exploring</li>
|
||
</ul>
|
||
<h3>1.2 Registration and Login</h3>
|
||
<ul>
|
||
<li>Open the app and tap "Register"</li>
|
||
<li>Enter your phone number or email</li>
|
||
<li>Set a password and complete registration</li>
|
||
<li>You must be at least 14 years old to register</li>
|
||
</ul>
|
||
<h2>II. Core Features Guide</h2>
|
||
<h3>2.1 Browsing Sentences</h3>
|
||
<ul>
|
||
<li>Home page displays recommended sentences</li>
|
||
<li>Swipe to browse more content</li>
|
||
<li>Tap a sentence to view details</li>
|
||
</ul>
|
||
<h3>2.2 Collecting Sentences</h3>
|
||
<ul>
|
||
<li>Tap the heart icon to save a sentence</li>
|
||
<li>View your collections in "My Collections"</li>
|
||
<li>Create custom collection categories</li>
|
||
</ul>
|
||
<h3>2.3 Creating Cards</h3>
|
||
<ul>
|
||
<li>Tap the create button on a sentence</li>
|
||
<li>Choose a card template</li>
|
||
<li>Customize background, font, and layout</li>
|
||
<li>Save or share your card</li>
|
||
</ul>
|
||
<h3>2.4 Publishing Content</h3>
|
||
<ul>
|
||
<li>Go to "My" → "Publish"</li>
|
||
<li>Write your original content</li>
|
||
<li>Add tags and categories</li>
|
||
<li>Submit for publication</li>
|
||
</ul>
|
||
<h2>III. Settings Guide</h2>
|
||
<h3>3.1 Personal Settings</h3>
|
||
<ul>
|
||
<li>Tap "My" → Settings icon</li>
|
||
<li>Modify avatar, nickname, and signature</li>
|
||
<li>Manage account security</li>
|
||
</ul>
|
||
<h3>3.2 Notification Settings</h3>
|
||
<ul>
|
||
<li>Settings → Notification Management</li>
|
||
<li>Choose notification types</li>
|
||
<li>Set quiet hours</li>
|
||
</ul>
|
||
<h3>3.3 Data Management</h3>
|
||
<ul>
|
||
<li>Settings → Data Management</li>
|
||
<li>Export data</li>
|
||
<li>Sync settings</li>
|
||
<li>Clear cache</li>
|
||
</ul>
|
||
<h2>IV. Tips</h2>
|
||
<h3>4.1 Use the search feature to quickly find sentences</h3>
|
||
<h3>4.2 Long-press a sentence for more options</h3>
|
||
<h3>4.3 Use widgets for quick access on your home screen</h3>
|
||
<h3>4.4 Enable dark mode for comfortable night reading</h3>
|
||
<h2>V. Help and Feedback</h2>
|
||
<h3>5.1 If you encounter problems:</h3>
|
||
<ul>
|
||
<li>My → About → User Feedback</li>
|
||
<li>Email: 2821981550@qq.com</li>
|
||
<li>We will respond within 1-3 working days</li>
|
||
</ul>
|
||
<h2>VI. Legal Statement</h2>
|
||
<h3>6.1 This app is developed and operated by **Mile City Pengpu Town Weifengbao Network Technology Studio** in accordance with the law</h3>
|
||
<h3>6.2 This app complies with the relevant laws and regulations of the People's Republic of China</h3>
|
||
<h3>6.3 The intellectual property of this app belongs to **Mile City Pengpu Town Weifengbao Network Technology Studio**</h3>
|
||
<h3>6.4 No one may copy, modify, or distribute any part of this app without authorization</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="index.html" class="back-link" id="back-link">← 返回协议列表</a>
|
||
</div>
|
||
|
||
<div class="footer" id="footer">
|
||
<div class="company" id="footer-company">弥勒市朋普镇微风暴网络科技工作室</div>
|
||
<div id="footer-contact">📧 2821981550@qq.com | 📧 2572560133@qq.com | 📍 云南省昆明市西山区滇池度假区（碧鸡街道车家壁513号）</div>
|
||
<div style="margin-top: 8px;" id="footer-credit">统一社会信用代码：92532526MA6PCX153W</div>
|
||
<div style="margin-top: 4px;" id="footer-icp">滇ICP备2022000863号-18A</div>
|
||
<div style="margin-top: 4px; color: var(--text-tertiary);">© 2026 Xianyan. All rights reserved.</div>
|
||
</div>
|
||
|
||
<script>
|
||
const DATA = {
|
||
zh: {
|
||
title: '新手指引',
|
||
subtitle: '功能导览与操作指引',
|
||
backLink: '← 返回协议列表',
|
||
company: '弥勒市朋普镇微风暴网络科技工作室',
|
||
contact: '📧 2821981550@qq.com | 📧 2572560133@qq.com | 📍 云南省昆明市西山区滇池度假区（碧鸡街道车家壁513号）',
|
||
credit: '统一社会信用代码：92532526MA6PCX153W',
|
||
icp: '滇ICP备2022000863号-18A'
|
||
},
|
||
en: {
|
||
title: 'Beginner Guide',
|
||
subtitle: 'Feature overview and operation guide',
|
||
backLink: '← Back to Agreement List',
|
||
company: 'Mile City Pengpu Town Weifengbao Network Technology Studio',
|
||
contact: '📧 2821981550@qq.com | 📧 2572560133@qq.com | 📍 Dianchi Resort, Xishan District, Kunming, Yunnan, China',
|
||
credit: 'Unified Social Credit Code: 92532526MA6PCX153W',
|
||
icp: 'ICP License: 滇ICP备2022000863号-18A'
|
||
}
|
||
};
|
||
|
||
function switchLang(lang) {
|
||
document.getElementById('content-zh').style.display = lang === 'zh' ? 'block' : 'none';
|
||
document.getElementById('content-en').style.display = lang === 'en' ? 'block' : 'none';
|
||
document.getElementById('header-title').textContent = DATA[lang].title;
|
||
document.getElementById('header-subtitle').textContent = DATA[lang].subtitle;
|
||
document.getElementById('back-link').textContent = DATA[lang].backLink;
|
||
document.getElementById('footer-company').textContent = DATA[lang].company;
|
||
document.getElementById('footer-contact').innerHTML = DATA[lang].contact;
|
||
document.getElementById('footer-credit').textContent = DATA[lang].credit;
|
||
document.getElementById('footer-icp').textContent = DATA[lang].icp;
|
||
document.getElementById('btn-zh').className = 'lang-btn' + (lang === 'zh' ? ' active' : '');
|
||
document.getElementById('btn-en').className = 'lang-btn' + (lang === 'en' ? ' active' : '');
|
||
document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';
|
||
const url = new URL(window.location);
|
||
if (lang === 'en') {
|
||
url.searchParams.set('lang', 'en');
|
||
} else {
|
||
url.searchParams.delete('lang');
|
||
}
|
||
history.replaceState(null, '', url);
|
||
}
|
||
|
||
(function() {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const lang = params.get('lang');
|
||
if (lang === 'en') switchLang('en');
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html> |