From 1fcc60b9aa7f0249e82477a521a04c51fd6c1cdf Mon Sep 17 00:00:00 2001 From: yuyx <237899745@qq.com> Date: Thu, 12 Feb 2026 18:02:28 +0800 Subject: [PATCH] feat(frontend): unify landing style and add product/scenes/start pages --- frontend/index.html | 843 +++++++++++------------------------------- frontend/landing.css | 754 +++++++++++++++++++++++++++++++++++++ frontend/product.html | 148 ++++++++ frontend/scenes.html | 155 ++++++++ frontend/start.html | 157 ++++++++ 5 files changed, 1431 insertions(+), 626 deletions(-) create mode 100644 frontend/landing.css create mode 100644 frontend/product.html create mode 100644 frontend/scenes.html create mode 100644 frontend/start.html diff --git a/frontend/index.html b/frontend/index.html index d1740ed..d9ba10c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,9 +3,8 @@ - 玩玩云 - 现代化云存储平台 + 玩玩云 - 企业网盘 - + - -
-
-
-
-
-
+
+ - -
-
-
- +
+
+
+
+
+ + 企业网盘 · 稳定可控 +
+

像主流网盘一样好用, +
更适合你的私有部署场景

+

+ 玩玩云提供文件上传、在线预览、分享权限、存储配额与后台管理能力,支持本地与 OSS 双模式,满足团队长期文件管理与协作需求。 +

+ +
+ 单文件分享 / 密码访问 / 时效控制 + 用户存储策略与配额可按人精细化配置 + 网页端与移动端统一体验,开箱即用 +
-

OSS 云存储

-

支持阿里云、腾讯云、AWS S3,数据完全自主掌控

-
-
-
- -
-

极速上传

-

拖拽上传,实时进度,支持大文件直连上传

-
-
-
- -
-

安全分享

-

一键生成链接,支持密码保护和有效期

-
-
-
- -
-

企业安全

-

JWT 认证,bcrypt 加密,全链路安全

-
-
-
- - -
-
-
- - Node.js + + + +
+

核心能力

+
+
+
+
高效上传
+

支持多文件上传、拖拽上传与进度反馈,日常资料归档更高效。

+
+
+
+
目录管理
+

支持目录层级导航、重命名、删除等管理操作,结构清晰。

+
+
+
+
可控分享
+

可设置密码、有效期、访问次数,外发资料更安全。

+
+
+
+
后台管控
+

支持用户权限、配额策略、存储类型管理,维护成本低。

+
+
+
-
- - Vue.js + + +
+ -
- - SQLite -
-
- - Docker -
-
- +
diff --git a/frontend/landing.css b/frontend/landing.css new file mode 100644 index 0000000..6fe7bf3 --- /dev/null +++ b/frontend/landing.css @@ -0,0 +1,754 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --bg-page: #f4f7fb; + --bg-card: #ffffff; + --bg-subtle: #f8fbff; + --line: #dbe5f2; + --line-soft: #e9eff8; + --text-main: #1f2a37; + --text-sub: #5b6b7f; + --text-muted: #8a96a6; + --primary: #2468f2; + --primary-dark: #1e57ca; + --success: #16a34a; + --warning: #d97706; + --danger: #dc2626; + --shadow: 0 10px 30px rgba(15, 23, 42, 0.08); + --radius: 12px; + --max-width: 1200px; +} + +body.theme-dark { + --bg-page: #0f172a; + --bg-card: #111b2d; + --bg-subtle: #152238; + --line: #26364f; + --line-soft: #1f3047; + --text-main: #e5edf7; + --text-sub: #b7c5d8; + --text-muted: #8ea0b9; + --primary: #3a86ff; + --primary-dark: #2d6dd1; + --success: #22c55e; + --shadow: none; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', Roboto, sans-serif; + color: var(--text-main); + background: linear-gradient(180deg, #f6f9ff 0%, #f3f6fb 55%, #eef3fb 100%); + line-height: 1.5; + min-height: 100vh; +} + +.page { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +.container { + width: min(var(--max-width), calc(100% - 32px)); + margin: 0 auto; +} + +.site-header { + border-bottom: 1px solid var(--line); + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(8px); + position: sticky; + top: 0; + z-index: 30; +} + +body.theme-dark .site-header { + background: rgba(17, 27, 45, 0.92); +} + +.site-header-inner { + min-height: 66px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; +} + +.brand { + display: inline-flex; + align-items: center; + gap: 10px; + font-size: 22px; + font-weight: 700; + color: var(--text-main); + letter-spacing: 0.2px; + text-decoration: none; +} + +.brand i { + color: var(--primary); + font-size: 20px; +} + +.top-nav { + display: inline-flex; + align-items: center; + gap: 16px; + color: var(--text-sub); + font-size: 14px; +} + +.top-nav a { + color: inherit; + text-decoration: none; + padding: 6px 2px; + border-bottom: 2px solid transparent; +} + +.top-nav a:hover { + color: var(--primary); +} + +.top-nav a.active { + color: var(--primary); + border-bottom-color: var(--primary); + font-weight: 700; +} + +.header-actions { + display: inline-flex; + align-items: center; + gap: 10px; +} + +.btn { + border: 1px solid transparent; + border-radius: 8px; + padding: 9px 14px; + font-size: 14px; + font-weight: 600; + text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 7px; + cursor: pointer; + transition: .2s ease; + white-space: nowrap; +} + +.btn-primary { + color: #fff; + background: var(--primary); + border-color: var(--primary); +} + +.btn-primary:hover { + background: var(--primary-dark); + border-color: var(--primary-dark); +} + +.btn-secondary { + color: var(--text-main); + background: var(--bg-card); + border-color: var(--line); +} + +.btn-secondary:hover { + border-color: #c2d3ea; + background: #f7faff; +} + +.main { + flex: 1; + padding: 24px 0 34px; +} + +.hero { + border: 1px solid var(--line); + border-radius: var(--radius); + background: var(--bg-card); + box-shadow: var(--shadow); + padding: 26px; + display: grid; + grid-template-columns: 1fr 1.05fr; + gap: 22px; + margin-bottom: 16px; +} + +.hero-tag { + display: inline-flex; + align-items: center; + gap: 8px; + border: 1px solid #cfe0ff; + border-radius: 999px; + background: #ecf4ff; + color: #1f5dd2; + padding: 6px 12px; + font-size: 12px; + font-weight: 600; + margin-bottom: 14px; +} + +body.theme-dark .hero-tag { + border-color: #31548a; + background: #1e2f4e; + color: #b9d6ff; +} + +.hero-title { + font-size: clamp(30px, 4vw, 42px); + line-height: 1.18; + margin-bottom: 14px; + letter-spacing: 0.1px; +} + +.hero-desc { + color: var(--text-sub); + font-size: 15px; + max-width: 560px; + margin-bottom: 18px; +} + +.hero-actions { + display: inline-flex; + gap: 10px; + flex-wrap: wrap; + margin-bottom: 16px; +} + +.hero-points { + display: grid; + gap: 8px; + color: var(--text-sub); + font-size: 13px; +} + +.hero-points span { + display: inline-flex; + align-items: center; + gap: 8px; +} + +.hero-points i { + color: var(--success); +} + +.carousel { + border: 1px solid var(--line-soft); + border-radius: 12px; + background: var(--bg-subtle); + overflow: hidden; + display: flex; + flex-direction: column; + min-height: 340px; +} + +.carousel-viewport { + position: relative; + flex: 1; + min-height: 0; +} + +.carousel-slide { + position: absolute; + inset: 0; + padding: 18px; + opacity: 0; + pointer-events: none; + transform: translateX(16px); + transition: opacity .32s ease, transform .32s ease; + display: flex; + flex-direction: column; + gap: 12px; +} + +.carousel-slide.is-active { + opacity: 1; + pointer-events: auto; + transform: translateX(0); +} + +.slide-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; +} + +.slide-title { + font-size: 18px; + font-weight: 700; + color: var(--text-main); +} + +.slide-tag { + font-size: 12px; + color: var(--text-muted); + border: 1px solid var(--line); + border-radius: 999px; + padding: 2px 8px; + background: var(--bg-card); +} + +.slide-body { + border: 1px solid var(--line); + border-radius: 10px; + background: var(--bg-card); + padding: 14px; + display: grid; + gap: 10px; + flex: 1; +} + +.slide-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + font-size: 13px; + color: var(--text-sub); +} + +.slide-row strong { + color: var(--text-main); + font-weight: 700; +} + +.slide-progress { + height: 10px; + border-radius: 999px; + background: #e4ebf7; + overflow: hidden; +} + +.slide-progress span { + display: block; + height: 100%; + border-radius: 999px; + background: linear-gradient(90deg, #33c1ff, var(--primary)); +} + +.carousel-footer { + border-top: 1px solid var(--line-soft); + background: var(--bg-card); + padding: 10px 12px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.carousel-dots { + display: inline-flex; + align-items: center; + gap: 6px; +} + +.carousel-dot { + width: 8px; + height: 8px; + border-radius: 999px; + border: 1px solid #c8d6ea; + background: #dbe5f3; + cursor: pointer; + transition: .2s ease; +} + +.carousel-dot.active { + width: 20px; + background: var(--primary); + border-color: var(--primary); +} + +.carousel-nav { + display: inline-flex; + align-items: center; + gap: 6px; +} + +.carousel-btn { + width: 28px; + height: 28px; + border-radius: 6px; + border: 1px solid var(--line); + background: var(--bg-card); + color: var(--text-sub); + cursor: pointer; +} + +.carousel-btn:hover { + color: var(--primary); + border-color: #bfd0e8; +} + +.page-banner { + border: 1px solid var(--line); + border-radius: var(--radius); + background: var(--bg-card); + box-shadow: var(--shadow); + padding: 22px; + margin-bottom: 14px; +} + +.page-banner h1 { + font-size: clamp(28px, 4vw, 36px); + margin-bottom: 10px; + line-height: 1.2; +} + +.page-banner p { + color: var(--text-sub); + font-size: 15px; + max-width: 860px; +} + +.kpi-row { + margin-top: 14px; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 10px; +} + +.kpi-card { + border: 1px solid var(--line-soft); + border-radius: 10px; + background: var(--bg-subtle); + padding: 12px; +} + +.kpi-label { + color: var(--text-muted); + font-size: 12px; + margin-bottom: 4px; +} + +.kpi-value { + color: var(--text-main); + font-size: 18px; + font-weight: 700; +} + +.section { + border: 1px solid var(--line); + border-radius: var(--radius); + background: var(--bg-card); + box-shadow: var(--shadow); + padding: 18px; + margin-bottom: 14px; +} + +.section-title { + font-size: 18px; + margin-bottom: 12px; + display: inline-flex; + align-items: center; + gap: 8px; +} + +.section-title i { + color: var(--primary); + font-size: 15px; +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 10px; +} + +.feature-card { + border: 1px solid var(--line-soft); + border-radius: 10px; + background: var(--bg-subtle); + padding: 14px; +} + +.feature-icon { + width: 34px; + height: 34px; + border-radius: 8px; + background: #e9f2ff; + color: var(--primary); + display: inline-flex; + align-items: center; + justify-content: center; + margin-bottom: 10px; +} + +.feature-name { + font-size: 15px; + font-weight: 700; + margin-bottom: 6px; +} + +.feature-desc { + font-size: 13px; + color: var(--text-sub); +} + +.scene-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 10px; +} + +.scene { + border: 1px solid var(--line-soft); + border-radius: 10px; + background: var(--bg-subtle); + padding: 14px; + display: grid; + gap: 8px; +} + +.scene h3 { + font-size: 15px; +} + +.scene p { + font-size: 13px; + color: var(--text-sub); +} + +.list-check { + list-style: none; + display: grid; + gap: 5px; + font-size: 12px; + color: var(--text-muted); +} + +.list-check li { + display: inline-flex; + align-items: center; + gap: 7px; +} + +.list-check li i { + color: var(--success); + font-size: 10px; +} + +.matrix { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; +} + +.matrix-card { + border: 1px solid var(--line-soft); + border-radius: 10px; + background: var(--bg-subtle); + padding: 14px; +} + +.matrix-card h3 { + font-size: 15px; + margin-bottom: 6px; +} + +.matrix-card p { + color: var(--text-sub); + font-size: 13px; +} + +.step-line { + display: grid; + gap: 10px; +} + +.step-item { + border: 1px solid var(--line-soft); + border-radius: 10px; + background: var(--bg-subtle); + padding: 12px; + display: flex; + align-items: flex-start; + gap: 10px; +} + +.step-num { + width: 26px; + height: 26px; + border-radius: 999px; + background: var(--primary); + color: #fff; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: 700; + flex-shrink: 0; +} + +.step-content h3 { + font-size: 15px; + margin-bottom: 4px; +} + +.step-content p { + color: var(--text-sub); + font-size: 13px; +} + +.cta-panel { + border: 1px solid #cfe0ff; + border-radius: 12px; + background: #edf4ff; + padding: 16px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + flex-wrap: wrap; +} + +body.theme-dark .cta-panel { + border-color: #31548a; + background: #1e2f4e; +} + +.cta-panel p { + font-size: 14px; + color: var(--text-sub); +} + +.footer { + border-top: 1px solid var(--line); + background: var(--bg-card); + padding: 14px 0; + color: var(--text-muted); + font-size: 12px; +} + +.footer-inner { + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; + flex-wrap: wrap; +} + +.footer-tech { + display: inline-flex; + align-items: center; + gap: 14px; + flex-wrap: wrap; +} + +@media (max-width: 1060px) { + .hero { + grid-template-columns: 1fr; + } + + .feature-grid, + .scene-grid, + .kpi-row, + .matrix { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 768px) { + .container { + width: calc(100% - 20px); + } + + .site-header-inner { + min-height: unset; + padding: 8px 0; + flex-wrap: wrap; + } + + .top-nav { + order: 3; + width: 100%; + overflow-x: auto; + white-space: nowrap; + } + + .header-actions { + width: 100%; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .header-actions .btn { + width: 100%; + } + + .main { + padding-top: 16px; + } + + .hero, + .section, + .page-banner { + padding: 14px; + } + + .carousel { + min-height: 320px; + } + + .feature-grid, + .scene-grid, + .kpi-row, + .matrix { + grid-template-columns: 1fr; + } + + .cta-panel { + flex-direction: column; + align-items: stretch; + } + + .cta-panel .btn { + width: 100%; + } +} + +@media (max-width: 480px) { + .brand { + font-size: 19px; + } + + .hero-title, + .page-banner h1 { + font-size: 28px; + } + + .hero-actions { + width: 100%; + } + + .hero-actions .btn { + width: 100%; + } + + .carousel-slide { + padding: 12px; + } + + .slide-title { + font-size: 16px; + } + + .slide-row { + font-size: 12px; + } + + .footer-inner, + .footer-tech { + justify-content: center; + } + + .footer { + text-align: center; + } +} diff --git a/frontend/product.html b/frontend/product.html new file mode 100644 index 0000000..09d4423 --- /dev/null +++ b/frontend/product.html @@ -0,0 +1,148 @@ + + + + + + 产品能力 - 玩玩云 + + + + +
+ + +
+
+
+

产品能力

+

围绕“上传、管理、分享、权限”构建企业网盘核心能力,保持简单操作路径与稳定使用体验。

+
+
+
存储模式
+
本地 + OSS
+
+
+
分享策略
+
密码/时效/次数
+
+
+
管理能力
+
用户/配额/权限
+
+
+
+ +
+

核心功能矩阵

+
+
+
+
上传与同步
+

支持多文件上传、拖拽上传与进度反馈,上传结果即时可见。

+
+
+
+
目录管理
+

支持文件夹层级管理、重命名、删除与路径导航。

+
+
+
+
在线预览
+

图片、视频、音频等常见格式可在线打开预览。

+
+
+
+
安全分享
+

支持访问密码、有效期、访问次数,外发更可控。

+
+
+
+ +
+

管理能力

+
+
+

用户与权限管理

+

管理员可分配用户权限、管理账号状态,支持业务隔离需求。

+
    +
  • 管理员/用户角色分离
  • +
  • 权限策略可调整
  • +
  • 支持后续策略扩展
  • +
+
+
+

存储策略与配额

+

支持按用户设置存储类型、默认配额、容量上限,避免资源失控。

+
    +
  • 默认配额可配置
  • +
  • OSS 与本地并行管理
  • +
  • 容量使用实时可见
  • +
+
+
+
+ +
+
+
+

开始体验完整产品能力

+

注册账号后即可进入文件管理后台,按你的业务流程配置网盘策略。

+
+ 立即开始 +
+
+
+
+ +
+ +
+
+ + + + diff --git a/frontend/scenes.html b/frontend/scenes.html new file mode 100644 index 0000000..37014ab --- /dev/null +++ b/frontend/scenes.html @@ -0,0 +1,155 @@ + + + + + + 应用场景 - 玩玩云 + + + + +
+ + +
+
+
+

应用场景

+

无论是团队协作、客户交付还是私有部署文档管理,玩玩云都能提供稳定可控的文件平台能力。

+
+
+
文档集中管理
+
统一入口
+
+
+
外部交付
+
安全分享
+
+
+
数据控制
+
私有部署
+
+
+
+ +
+

典型业务场景

+
+
+

团队协作文件库

+

集中存放项目资料、合同、设计稿,统一访问入口,减少文件分散。

+
    +
  • 项目文档统一归档
  • +
  • 分享权限可追踪
  • +
  • 支持移动端快速查看
  • +
+
+
+

客户交付中心

+

交付包通过链接安全下发,支持密码与时效,降低误扩散风险。

+
    +
  • 分享自动失效
  • +
  • 下载行为可控
  • +
  • 可按客户分目录管理
  • +
+
+
+

私有化文档平台

+

适合内网或私有云部署,数据可控,满足合规与长期沉淀需求。

+
    +
  • 本地与 OSS 灵活组合
  • +
  • 用户配额精细化
  • +
  • 部署维护成本可控
  • +
+
+
+
+ +
+

按团队角色使用

+
+
+

产品/运营团队

+

用于版本资料、活动素材、协作文档统一管理,避免版本混乱。

+
    +
  • 按项目分类目录
  • +
  • 快速检索与下载
  • +
  • 外部共享便捷
  • +
+
+
+

技术/交付团队

+

用于交付包、部署文档、测试包归档,实现可追溯的交付链路。

+
    +
  • 版本文件集中留存
  • +
  • 访问策略可控制
  • +
  • 长期沉淀知识资产
  • +
+
+
+
+ +
+
+
+

让文件平台贴合你的业务场景

+

你可以先注册体验,再按团队方式配置存储与分享策略。

+
+ 开始试用 +
+
+
+
+ +
+ +
+
+ + + + diff --git a/frontend/start.html b/frontend/start.html new file mode 100644 index 0000000..30fda39 --- /dev/null +++ b/frontend/start.html @@ -0,0 +1,157 @@ + + + + + + 快速开始 - 玩玩云 + + + + +
+ + +
+
+
+

快速开始

+

3 分钟完成首次体验:注册账号、上传文件、创建安全分享。后续可按业务需要配置存储与权限策略。

+
+
+
上手成本
+
低学习门槛
+
+
+
部署方式
+
Docker / Node.js
+
+
+
推荐起步
+
默认 1GB 配额
+
+
+
+ +
+

上手流程

+
+
+ 1 +
+

注册并登录

+

创建用户账号后进入“我的文件”,系统会自动使用默认存储策略与配额。

+
+
+
+ 2 +
+

上传并整理文件

+

通过“上传文件”与“新建文件夹”完成基础目录结构,便于后续共享与检索。

+
+
+
+ 3 +
+

创建分享链接

+

按需设置密码、有效期和访问次数,将资料安全地发送给目标对象。

+
+
+
+ 4 +
+

管理员精细配置

+

在管理员面板配置用户存储类型(本地/OSS)与配额限制,保证资源可控。

+
+
+
+
+ +
+

常见问题

+
+
+

默认配额是多少?

+

如果管理员未单独设置,系统默认使用 1GB 配额策略,后续可动态调整。

+
+
+

如何选择存储方式?

+

支持本地与 OSS 模式。管理员可统一控制,也可在授权下由用户自行切换。

+
+
+

如何提升分享安全性?

+

建议启用访问密码、较短有效期和访问次数上限,避免链接扩散风险。

+
+
+

移动端是否可用?

+

支持移动端上传、预览、下载与分享操作,常用流程已完成触控优化。

+
+
+
+ +
+
+
+

准备好了就开始吧

+

你可以立即注册体验,也可以先登录已有账号继续使用。

+
+ +
+
+
+
+ +
+ +
+
+ + + +