158 lines
6.0 KiB
HTML
158 lines
6.0 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>快速开始 - 玩玩云</title>
|
||
<link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
|
||
<link rel="stylesheet" href="landing.css?v=20260212008">
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<header class="site-header">
|
||
<div class="container site-header-inner">
|
||
<a class="brand" href="index.html">
|
||
<i class="fas fa-cloud"></i>
|
||
<span>玩玩云</span>
|
||
</a>
|
||
|
||
<nav class="top-nav">
|
||
<a href="product.html">产品能力</a>
|
||
<a href="scenes.html">应用场景</a>
|
||
<a href="start.html" class="active">快速开始</a>
|
||
</nav>
|
||
|
||
<div class="header-actions">
|
||
<a href="app.html?action=login" class="btn btn-secondary">
|
||
<i class="fas fa-circle-user"></i>
|
||
登录
|
||
</a>
|
||
<a href="app.html?action=register" class="btn btn-primary">
|
||
<i class="fas fa-user-plus"></i>
|
||
免费注册
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<div class="container">
|
||
<section class="page-banner">
|
||
<h1>快速开始</h1>
|
||
<p>3 分钟完成首次体验：注册账号、上传文件、创建安全分享。后续可按业务需要配置存储与权限策略。</p>
|
||
<div class="kpi-row">
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">上手成本</div>
|
||
<div class="kpi-value">低学习门槛</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">部署方式</div>
|
||
<div class="kpi-value">Docker / Node.js</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">推荐起步</div>
|
||
<div class="kpi-value">默认 1GB 配额</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<h2 class="section-title"><i class="fas fa-list-check"></i>上手流程</h2>
|
||
<div class="step-line">
|
||
<article class="step-item">
|
||
<span class="step-num">1</span>
|
||
<div class="step-content">
|
||
<h3>注册并登录</h3>
|
||
<p>创建用户账号后进入“我的文件”，系统会自动使用默认存储策略与配额。</p>
|
||
</div>
|
||
</article>
|
||
<article class="step-item">
|
||
<span class="step-num">2</span>
|
||
<div class="step-content">
|
||
<h3>上传并整理文件</h3>
|
||
<p>通过“上传文件”与“新建文件夹”完成基础目录结构，便于后续共享与检索。</p>
|
||
</div>
|
||
</article>
|
||
<article class="step-item">
|
||
<span class="step-num">3</span>
|
||
<div class="step-content">
|
||
<h3>创建分享链接</h3>
|
||
<p>按需设置密码、有效期和访问次数，将资料安全地发送给目标对象。</p>
|
||
</div>
|
||
</article>
|
||
<article class="step-item">
|
||
<span class="step-num">4</span>
|
||
<div class="step-content">
|
||
<h3>管理员精细配置</h3>
|
||
<p>在管理员面板配置用户存储类型（本地/OSS）与配额限制，保证资源可控。</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<h2 class="section-title"><i class="fas fa-circle-question"></i>常见问题</h2>
|
||
<div class="matrix">
|
||
<article class="matrix-card">
|
||
<h3>默认配额是多少？</h3>
|
||
<p>如果管理员未单独设置，系统默认使用 1GB 配额策略，后续可动态调整。</p>
|
||
</article>
|
||
<article class="matrix-card">
|
||
<h3>如何选择存储方式？</h3>
|
||
<p>支持本地与 OSS 模式。管理员可统一控制，也可在授权下由用户自行切换。</p>
|
||
</article>
|
||
<article class="matrix-card">
|
||
<h3>如何提升分享安全性？</h3>
|
||
<p>建议启用访问密码、较短有效期和访问次数上限，避免链接扩散风险。</p>
|
||
</article>
|
||
<article class="matrix-card">
|
||
<h3>移动端是否可用？</h3>
|
||
<p>支持移动端上传、预览、下载与分享操作，常用流程已完成触控优化。</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="cta-panel">
|
||
<div>
|
||
<h3 style="font-size:16px;margin-bottom:4px;">准备好了就开始吧</h3>
|
||
<p>你可以立即注册体验，也可以先登录已有账号继续使用。</p>
|
||
</div>
|
||
<div style="display:inline-flex;gap:8px;flex-wrap:wrap;">
|
||
<a href="app.html?action=register" class="btn btn-primary"><i class="fas fa-rocket"></i>立即注册</a>
|
||
<a href="app.html?action=login" class="btn btn-secondary"><i class="fas fa-circle-user"></i>去登录</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="container footer-inner">
|
||
<div>玩玩云 © 2026</div>
|
||
<div class="footer-tech">
|
||
<span><i class="fab fa-node-js"></i> Node.js</span>
|
||
<span><i class="fab fa-vuejs"></i> Vue.js</span>
|
||
<span><i class="fas fa-database"></i> SQLite</span>
|
||
<span><i class="fab fa-docker"></i> Docker</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
(async function() {
|
||
try {
|
||
const response = await fetch('/api/public/theme');
|
||
const data = await response.json();
|
||
if (data.success && data.theme === 'dark') {
|
||
document.body.classList.add('theme-dark');
|
||
}
|
||
} catch (error) {
|
||
console.log('主题加载失败，使用默认主题');
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|