starlight-apk/NebulaShell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对网页CSS进行重构

Browse Source
This commit is contained in:
Falck
2026-04-06 17:03:11 +08:00
parent a615b2af0f
commit 4eaf10e753
20 changed files with 951 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/architecture.html
View File

@@ -24,13 +24,13 @@
<div id="dock-container"></div>
<main class="page-content">
<div class="page-header" data-parallax-speed="0.7">
<div class="page-header" data-parallax-speed="1.0">
<span class="section-badge">架构设计</span>
<h1 class="page-title">插件驱动的<span class="gradient-text">分层架构</span></h1>
<p class="page-desc">一切皆为插件，框架本身只提供核心能力</p>
</div>
<div class="arch-diagram" data-parallax-speed="0.25">
<div class="arch-diagram" data-parallax-speed="1.0">
<div class="arch-layer arch-core">
<div class="arch-label">Future OSS 核心</div>
<div class="arch-modules">

65
website/css/dock.css
View File

@@ -1,4 +1,4 @@
/* ===== Dock 侧边栏 ===== */
/* ===== Dock 侧边栏 - 苹果液态玻璃 ===== */
#dock {
position: fixed;
right: 20px;
@@ -9,30 +9,69 @@
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 8px;
background: rgba(3, 7, 18, 0.7);
backdrop-filter: blur(16px);
border: 1px solid var(--border);
border-radius: 16px;
padding: 14px 10px;
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.18) 0%,
rgba(255, 255, 255, 0.08) 100%
);
backdrop-filter: blur(50px) saturate(200%);
-webkit-backdrop-filter: blur(50px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 22px;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(255, 255, 255, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#dock:hover {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0.12) 100%
);
border-color: rgba(255, 255, 255, 0.35);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.18),
0 6px 16px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}
.dock-item {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
width: 38px;
height: 38px;
border-radius: 12px;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.25s ease;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.dock-item:hover, .dock-item.active {
color: var(--cyan-light);
background: rgba(6, 182, 212, 0.15);
transform: scale(1.15);
color: #fff;
/* 苹果风格高光滑 */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.15) 100%
);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.4);
transform: scale(1.2);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.15),
0 2px 6px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8),
inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}
.dock-item svg {

275
website/css/docs.css
View File

@@ -8,7 +8,7 @@
overflow: hidden;
}
/* 顶部栏 */
/* 顶部栏 - 苹果液态玻璃 */
.docs-header {
height: 56px;
flex-shrink: 0;
@@ -16,12 +16,86 @@
align-items: center;
gap: 16px;
padding: 0 24px;
background: rgba(3, 7, 18, 0.95);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(3, 7, 18, 0.75) 0%,
rgba(3, 7, 18, 0.6) 100%
);
backdrop-filter: blur(50px) saturate(200%);
-webkit-backdrop-filter: blur(50px) saturate(200%);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 100;
}
/* 汉堡菜单按钮 - 苹果风格 */
.docs-hamburger {
display: none;
width: 40px;
height: 40px;
border: none;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
position: relative;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.docs-hamburger:hover {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.06) 100%
);
border-color: rgba(255, 255, 255, 0.2);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.docs-hamburger-line {
position: absolute;
left: 50%;
width: 20px;
height: 2px;
background: var(--text-secondary);
border-radius: 1px;
transform: translateX(-50%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.docs-hamburger-line:nth-child(1) { top: 14px; }
.docs-hamburger-line:nth-child(2) { top: 19px; }
.docs-hamburger-line:nth-child(3) { top: 24px; }
/* 汉堡菜单激活状态 - 变为 X */
.docs-hamburger.is-active .docs-hamburger-line:nth-child(1) {
top: 19px;
transform: translateX(-50%) rotate(45deg);
}
.docs-hamburger.is-active .docs-hamburger-line:nth-child(2) {
opacity: 0;
transform: translateX(-50%) scaleX(0);
}
.docs-hamburger.is-active .docs-hamburger-line:nth-child(3) {
top: 19px;
transform: translateX(-50%) rotate(-45deg);
}
.docs-header-title {
display: flex;
align-items: center;
@@ -74,14 +148,42 @@
overflow: hidden;
}
/* 左侧导航 */
/* 左侧导航 - 苹果液态玻璃 */
.docs-sidebar {
width: 260px;
flex-shrink: 0;
background: rgba(2, 5, 16, 0.6);
border-right: 1px solid var(--border);
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(2, 5, 16, 0.65) 0%,
rgba(2, 5, 16, 0.5) 100%
);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
padding: 20px 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 移动端遮罩层 */
.docs-sidebar-overlay {
display: none;
}
/* 液态玻璃效果 - 通用类 */
.liquid-glass {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.liquid-glass-strong {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.docs-nav-section {
@@ -126,7 +228,7 @@
font-family: 'JetBrains Mono', monospace;
}
/* 左下角固定按钮 */
/* 左下角固定按钮 - 苹果液态玻璃 */
.docs-wiki-btn {
position: fixed;
bottom: 24px;
@@ -135,21 +237,39 @@
align-items: center;
gap: 8px;
padding: 12px 20px;
background: linear-gradient(135deg, var(--cyan), var(--blue));
border: none;
border-radius: 12px;
/* 苹果液态玻璃按钮 */
background: linear-gradient(
135deg,
rgba(6, 182, 212, 0.8) 0%,
rgba(59, 130, 246, 0.7) 100%
);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
z-index: 200;
box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
transition: all 0.2s;
box-shadow:
0 8px 24px rgba(6, 182, 212, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.docs-wiki-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4);
transform: translateY(-2px) scale(1.05);
background: linear-gradient(
135deg,
rgba(6, 182, 212, 0.9) 0%,
rgba(59, 130, 246, 0.8) 100%
);
box-shadow:
0 12px 32px rgba(6, 182, 212, 0.4),
0 4px 12px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.docs-wiki-btn svg {
@@ -282,7 +402,130 @@
}
@media (max-width: 768px) {
.docs-sidebar { display: none; }
/* 显示汉堡菜单按钮 */
.docs-hamburger {
display: block;
}
/* 隐藏桌面端面包屑 */
.docs-header-breadcrumb {
display: none;
}
/* 侧边栏变为滑出式 - 苹果液态玻璃 */
.docs-sidebar {
position: fixed;
top: 56px;
left: 0;
bottom: 0;
width: 280px;
z-index: 200;
transform: translateX(-100%);
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(2, 5, 16, 0.85) 0%,
rgba(2, 5, 16, 0.75) 100%
);
backdrop-filter: blur(60px) saturate(220%);
-webkit-backdrop-filter: blur(60px) saturate(220%);
border-right: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
10px 0 40px rgba(0, 0, 0, 0.3),
0 0 1px rgba(255, 255, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* 侧边栏激活状态 */
.docs-sidebar.is-open {
transform: translateX(0);
}
/* 遮罩层 */
.docs-sidebar-overlay {
display: block;
position: fixed;
inset: 0;
top: 56px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 150;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.docs-sidebar-overlay.is-visible {
opacity: 1;
pointer-events: auto;
}
.docs-content { padding: 24px 20px 100px; }
.docs-wiki-btn span { display: none; }
/* 移动端顶部栏 */
.docs-header {
padding: 0 16px;
height: 56px;
}
.docs-header-title {
font-size: 14px;
}
.docs-header-breadcrumb {
font-size: 12px;
}
/* 移动端内容区 */
.docs-content h1 {
font-size: 24px;
}
.docs-content h2 {
font-size: 18px;
}
.docs-content h3 {
font-size: 16px;
}
.docs-content p,
.docs-content li {
font-size: 14px;
}
.docs-content pre {
padding: 12px 16px;
font-size: 12px;
}
.docs-content table {
font-size: 13px;
overflow-x: auto;
display: block;
}
/* 底部固定按钮只显示图标 */
.docs-wiki-btn {
bottom: 16px;
left: 16px;
padding: 12px;
border-radius: 50%;
width: 48px;
height: 48px;
justify-content: center;
}
}
@media (max-width: 480px) {
.docs-content {
padding: 20px 16px 100px;
}
.docs-content h1 {
font-size: 22px;
}
.docs-content h2 {
font-size: 17px;
}
.docs-content pre {
font-size: 11px;
}
}

26
website/css/hero.css
View File

@@ -371,7 +371,18 @@
}
@media (max-width: 640px) {
.hero-container {
padding: 40px 16px;
}
.hero-stats { grid-template-columns: 1fr; gap: 16px; }
.hero-actions {
justify-content: center;
}
.btn {
width: 100%;
max-width: 280px;
justify-content: center;
}
.ripple-container {
width: 240px;
height: 240px;
@@ -391,4 +402,19 @@
.cube-face-left { transform: rotateY(-90deg) translateZ(70px); }
.cube-face-top { transform: rotateX(90deg) translateZ(70px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(70px); }
.hero-title {
font-size: 40px;
}
.hero-subtitle {
font-size: 18px;
}
.hero-desc {
font-size: 14px;
padding: 0 8px;
}
.badge {
font-size: 12px;
padding: 6px 14px;
}
}

55
website/css/main.css
View File

@@ -87,10 +87,57 @@ body {
}
.glass {
background: var(--bg-glass);
backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: 16px;
/* 苹果液态玻璃效果 */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.02) 100%
);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 24px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}
/* 苹果液态玻璃 - 轻量版 */
.liquid-glass {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.06) 100%
);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* 苹果液态玻璃 - 加强版 */
.liquid-glass-strong {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.08) 50%,
rgba(255, 255, 255, 0.03) 100%
);
backdrop-filter: blur(50px) saturate(220%);
-webkit-backdrop-filter: blur(50px) saturate(220%);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 28px;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.1),
inset 0 2px 0 rgba(255, 255, 255, 0.6),
inset 0 -2px 0 rgba(255, 255, 255, 0.15);
}
/* 按钮 */

221
website/css/page.css
View File

@@ -105,17 +105,40 @@
}
.feature-card {
background: var(--bg-glass);
border: 1px solid var(--border);
border-radius: 20px;
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.04) 100%
);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 24px;
padding: 32px;
transition: all 0.4s ease;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.12),
0 2px 6px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.feature-card:hover {
border-color: var(--border-hover);
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(6, 182, 212, 0.1);
/* 悬停时增强玻璃效果 */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.06) 100%
);
backdrop-filter: blur(50px) saturate(200%);
-webkit-backdrop-filter: blur(50px) saturate(200%);
border-color: rgba(255, 255, 255, 0.3);
box-shadow:
0 20px 48px rgba(0, 0, 0, 0.18),
0 8px 16px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}
.feature-icon {
@@ -195,10 +218,21 @@
.install-demo {
max-width: 700px;
margin: 0 auto 48px;
background: rgba(10, 15, 30, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(10, 15, 30, 0.7) 0%,
rgba(10, 15, 30, 0.5) 100%
);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.2),
0 4px 10px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.demo-header {
@@ -264,14 +298,33 @@
.arch-diagram { max-width: 900px; margin: 0 auto 64px; }
.arch-layer {
border-radius: 16px;
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%
);
backdrop-filter: blur(30px) saturate(160%);
-webkit-backdrop-filter: blur(30px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 24px;
border: 1px solid var(--border);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.arch-core {
background: rgba(6, 182, 212, 0.05);
border-color: rgba(6, 182, 212, 0.2);
background: linear-gradient(
135deg,
rgba(6, 182, 212, 0.15) 0%,
rgba(6, 182, 212, 0.08) 100%
);
border-color: rgba(6, 182, 212, 0.3);
box-shadow:
0 8px 24px rgba(6, 182, 212, 0.15),
0 2px 8px rgba(6, 182, 212, 0.08),
inset 0 1px 0 rgba(6, 182, 212, 0.2);
}
.arch-label {
@@ -330,17 +383,38 @@
}
.arch-plugin {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
border-radius: 12px;
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.02) 100%
);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
padding: 20px;
text-align: center;
transition: all 0.3s;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.arch-plugin:hover {
border-color: var(--border-hover);
transform: translateY(-4px);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.04) 100%
);
backdrop-filter: blur(30px) saturate(170%);
-webkit-backdrop-filter: blur(30px) saturate(170%);
border-color: rgba(255, 255, 255, 0.22);
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.12),
0 3px 8px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.arch-plugin-title {
@@ -373,11 +447,38 @@
align-items: center;
gap: 10px;
padding: 12px 20px;
background: var(--bg-glass);
border: 1px solid var(--border);
border-radius: 12px;
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%
);
backdrop-filter: blur(20px) saturate(150%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
font-size: 14px;
font-weight: 500;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.flow-step:hover {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.05) 100%
);
backdrop-filter: blur(30px) saturate(170%);
-webkit-backdrop-filter: blur(30px) saturate(170%);
border-color: rgba(255, 255, 255, 0.25);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.12),
0 2px 6px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transform: translateY(-2px);
}
.flow-step-num {
@@ -404,17 +505,39 @@
}
.step-card {
background: var(--bg-glass);
border: 1px solid var(--border);
border-radius: 16px;
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%
);
backdrop-filter: blur(30px) saturate(160%);
-webkit-backdrop-filter: blur(30px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 32px;
text-align: center;
transition: all 0.3s;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.step-card:hover {
border-color: var(--border-hover);
transform: translateY(-4px);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.05) 100%
);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border-color: rgba(255, 255, 255, 0.25);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.15),
0 4px 10px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.step-number {
@@ -457,7 +580,9 @@
}
@media (max-width: 768px) {
.page-content { padding-left: 24px; }
.page-content {
padding: 80px 20px 60px;
}
.features-grid { grid-template-columns: 1fr; }
.arch-plugin-grid { grid-template-columns: 1fr; }
.steps-grid { grid-template-columns: 1fr; }
@@ -465,4 +590,46 @@
.flow-arrow { transform: rotate(90deg); }
.pkg-explain { grid-template-columns: 1fr; }
.pkg-table { overflow-x: auto; }
/* 移动端页面标题区域 */
.page-header {
margin-bottom: 40px;
}
.page-title {
font-size: 28px;
}
.page-desc {
font-size: 15px;
}
/* 移动端特性卡片 */
.feature-card {
padding: 24px;
}
.feature-icon {
width: 48px;
height: 48px;
}
.feature-icon svg {
width: 24px;
height: 24px;
}
}
@media (max-width: 480px) {
.page-content {
padding: 60px 16px 40px;
}
.page-header {
margin-bottom: 32px;
}
.page-title {
font-size: 24px;
}
.page-desc {
font-size: 14px;
}
.feature-card {
padding: 20px;
}
}

65
website/css/quickstart.css
View File

@@ -1,65 +0,0 @@
/* ===== 快速开始 ===== */
#quickstart {
padding: 120px 0;
position: relative;
z-index: 1;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 64px;
}
.step-card {
background: var(--bg-glass);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
text-align: center;
transition: all 0.3s;
}
.step-card:hover {
border-color: var(--border-hover);
transform: translateY(-4px);
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cyan), var(--blue));
font-size: 20px;
font-weight: 800;
margin-bottom: 20px;
}
.step-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 16px;
}
.step-code {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
line-height: 1.8;
color: var(--text-secondary);
text-align: left;
background: rgba(10, 15, 30, 0.6);
padding: 16px;
border-radius: 8px;
}
.quickstart-cta {
text-align: center;
}
@media (max-width: 768px) {
.steps-grid { grid-template-columns: 1fr; }
}

65
website/docs/architecture.html
View File

@@ -16,6 +16,11 @@
<main class="page-docs">
<header class="docs-header">
<button class="docs-hamburger" id="docs-hamburger" aria-label="切换导航菜单">
<span class="docs-hamburger-line"></span>
<span class="docs-hamburger-line"></span>
<span class="docs-hamburger-line"></span>
</button>
<div class="docs-header-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
@@ -28,8 +33,10 @@
</div>
</header>
<div class="docs-sidebar-overlay" id="docs-overlay"></div>
<div class="docs-layout">
<aside class="docs-sidebar">
<aside class="docs-sidebar" id="docs-sidebar">
<div class="docs-nav-section">
<div class="docs-nav-section-title">入门</div>
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
@@ -38,7 +45,6 @@
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">快速开始</div>
<a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">插件</div>
@@ -101,5 +107,60 @@
<script src="../js/particles.js"></script>
<script src="../js/parallax.js"></script>
<script src="../js/animations.js"></script>
<script>
// 汉堡菜单交互逻辑
(function() {
const hamburger = document.getElementById('docs-hamburger');
const sidebar = document.getElementById('docs-sidebar');
const overlay = document.getElementById('docs-overlay');
if (!hamburger || !sidebar || !overlay) return;
function openSidebar() {
sidebar.classList.add('is-open');
overlay.classList.add('is-visible');
hamburger.classList.add('is-active');
document.body.style.overflow = 'hidden';
}
function closeSidebar() {
sidebar.classList.remove('is-open');
overlay.classList.remove('is-visible');
hamburger.classList.remove('is-active');
document.body.style.overflow = ''';
}
function toggleSidebar() {
if (sidebar.classList.contains('is-open')) {
closeSidebar();
} else {
openSidebar();
}
}
hamburger.addEventListener('click', toggleSidebar);
overlay.addEventListener('click', closeSidebar);
sidebar.querySelectorAll('.docs-nav-item).forEach(link => {
link.addEventListener('click', closeSidebar);
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
closeSidebar();
}
});
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (window.innerWidth > 768 && sidebar.classList.contains('is-open')) {
closeSidebar();
}
}, 100);
});
})();
</script>
</body>
</html>

65
website/docs/development.html
View File

@@ -16,6 +16,11 @@
<main class="page-docs">
<header class="docs-header">
<button class="docs-hamburger" id="docs-hamburger" aria-label="切换导航菜单">
<span class="docs-hamburger-line"></span>
<span class="docs-hamburger-line"></span>
<span class="docs-hamburger-line"></span>
</button>
<div class="docs-header-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
@@ -28,8 +33,10 @@
</div>
</header>
<div class="docs-sidebar-overlay" id="docs-overlay"></div>
<div class="docs-layout">
<aside class="docs-sidebar">
<aside class="docs-sidebar" id="docs-sidebar">
<div class="docs-nav-section">
<div class="docs-nav-section-title">入门</div>
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
@@ -38,7 +45,6 @@
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">快速开始</div>
<a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">插件</div>
@@ -120,5 +126,60 @@ class MyPlugin(Plugin):
<script src="../js/particles.js"></script>
<script src="../js/parallax.js"></script>
<script src="../js/animations.js"></script>
<script>
// 汉堡菜单交互逻辑
(function() {
const hamburger = document.getElementById('docs-hamburger');
const sidebar = document.getElementById('docs-sidebar');
const overlay = document.getElementById('docs-overlay');
if (!hamburger || !sidebar || !overlay) return;
function openSidebar() {
sidebar.classList.add('is-open');
overlay.classList.add('is-visible');
hamburger.classList.add('is-active');
document.body.style.overflow = 'hidden';
}
function closeSidebar() {
sidebar.classList.remove('is-open');
overlay.classList.remove('is-visible');
hamburger.classList.remove('is-active');
document.body.style.overflow = ''';
}
function toggleSidebar() {
if (sidebar.classList.contains('is-open')) {
closeSidebar();
} else {
openSidebar();
}
}
hamburger.addEventListener('click', toggleSidebar);
overlay.addEventListener('click', closeSidebar);
sidebar.querySelectorAll('.docs-nav-item).forEach(link => {
link.addEventListener('click', closeSidebar);
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
closeSidebar();
}
});
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (window.innerWidth > 768 && sidebar.classList.contains('is-open')) {
closeSidebar();
}
}, 100);
});
})();
</script>
</body>
</html>

67
website/docs/index.html
View File

@@ -16,6 +16,11 @@
<main class="page-docs">
<header class="docs-header">
<button class="docs-hamburger" id="docs-hamburger" aria-label="切换导航菜单">
<span class="docs-hamburger-line"></span>
<span class="docs-hamburger-line"></span>
<span class="docs-hamburger-line"></span>
</button>
<div class="docs-header-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
@@ -28,8 +33,10 @@
</div>
</header>
<div class="docs-sidebar-overlay" id="docs-overlay"></div>
<div class="docs-layout">
<aside class="docs-sidebar">
<aside class="docs-sidebar" id="docs-sidebar">
<div class="docs-nav-section">
<div class="docs-nav-section-title">入门</div>
<a href="index.html" class="docs-nav-item active">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
@@ -38,7 +45,6 @@
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">快速开始</div>
<a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">插件</div>
@@ -100,6 +106,63 @@
<script src="../js/parallax.js"></script>
<script src="../js/animations.js"></script>
<script>
// 汉堡菜单交互逻辑
(function() {
const hamburger = document.getElementById('docs-hamburger');
const sidebar = document.getElementById('docs-sidebar');
const overlay = document.getElementById('docs-overlay');
if (!hamburger || !sidebar || !overlay) return;
function openSidebar() {
sidebar.classList.add('is-open');
overlay.classList.add('is-visible');
hamburger.classList.add('is-active');
document.body.style.overflow = 'hidden';
}
function closeSidebar() {
sidebar.classList.remove('is-open');
overlay.classList.remove('is-visible');
hamburger.classList.remove('is-active');
document.body.style.overflow = '';
}
function toggleSidebar() {
if (sidebar.classList.contains('is-open')) {
closeSidebar();
} else {
openSidebar();
}
}
hamburger.addEventListener('click', toggleSidebar);
overlay.addEventListener('click', closeSidebar);
// 点击导航链接后关闭侧边栏
sidebar.querySelectorAll('.docs-nav-item').forEach(link => {
link.addEventListener('click', closeSidebar);
});
// ESC 键关闭侧边栏
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
closeSidebar();
}
});
// 窗口大小改变时重置状态
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (window.innerWidth > 768 && sidebar.classList.contains('is-open')) {
closeSidebar();
}
}, 100);
});
})();
document.querySelectorAll('pre code').forEach(function(block) {
if (typeof hljs !== 'undefined') hljs.highlightElement(block);
});

65
website/docs/plugins.html
View File

@@ -16,6 +16,11 @@
<main class="page-docs">
<header class="docs-header">
<button class="docs-hamburger" id="docs-hamburger" aria-label="切换导航菜单">
<span class="docs-hamburger-line"></span>
<span class="docs-hamburger-line"></span>
<span class="docs-hamburger-line"></span>
</button>
<div class="docs-header-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
@@ -28,8 +33,10 @@
</div>
</header>
<div class="docs-sidebar-overlay" id="docs-overlay"></div>
<div class="docs-layout">
<aside class="docs-sidebar">
<aside class="docs-sidebar" id="docs-sidebar">
<div class="docs-nav-section">
<div class="docs-nav-section-title">入门</div>
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
@@ -38,7 +45,6 @@
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">快速开始</div>
<a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">插件</div>
@@ -86,5 +92,60 @@
<script src="../js/particles.js"></script>
<script src="../js/parallax.js"></script>
<script src="../js/animations.js"></script>
<script>
// 汉堡菜单交互逻辑
(function() {
const hamburger = document.getElementById('docs-hamburger');
const sidebar = document.getElementById('docs-sidebar');
const overlay = document.getElementById('docs-overlay');
if (!hamburger || !sidebar || !overlay) return;
function openSidebar() {
sidebar.classList.add('is-open');
overlay.classList.add('is-visible');
hamburger.classList.add('is-active');
document.body.style.overflow = 'hidden';
}
function closeSidebar() {
sidebar.classList.remove('is-open');
overlay.classList.remove('is-visible');
hamburger.classList.remove('is-active');
document.body.style.overflow = ''';
}
function toggleSidebar() {
if (sidebar.classList.contains('is-open')) {
closeSidebar();
} else {
openSidebar();
}
}
hamburger.addEventListener('click', toggleSidebar);
overlay.addEventListener('click', closeSidebar);
sidebar.querySelectorAll('.docs-nav-item).forEach(link => {
link.addEventListener('click', closeSidebar);
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
closeSidebar();
}
});
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (window.innerWidth > 768 && sidebar.classList.contains('is-open')) {
closeSidebar();
}
}, 100);
});
})();
</script>
</body>
</html>

106
website/docs/quickstart.html
View File

@@ -1,106 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>快速开始 - Future OSS 文档</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="../css/dock.css" />
<link rel="stylesheet" href="../css/docs.css" />
</head>
<body>
<canvas id="particles"></canvas>
<div id="dock-container"></div>
<main class="page-docs">
<header class="docs-header">
<div class="docs-header-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg>
<span>文档中心</span>
</div>
<div class="docs-header-breadcrumb">快速开始 · 三步运行</div>
<div class="docs-header-actions">
<a href="https://gitee.com/starlight-apk/feature-oss/wikis" target="_blank" class="docs-wiki-link">完整 Wiki</a>
</div>
</header>
<div class="docs-layout">
<aside class="docs-sidebar">
<div class="docs-nav-section">
<div class="docs-nav-section-title">入门</div>
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
<a href="why-python.html" class="docs-nav-item">为什么选择 Python<span class="nav-path">/ 技术选型</span></a>
<a href="architecture.html" class="docs-nav-item">架构设计<span class="nav-path">/ 三层架构</span></a>
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">快速开始</div>
<a href="quickstart.html" class="docs-nav-item active">三步运行<span class="nav-path">/ 安装部署</span></a>
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">插件</div>
<a href="plugins.html" class="docs-nav-item">官方插件列表<span class="nav-path">/ 12+ 插件</span></a>
<a href="development.html" class="docs-nav-item">插件开发指南<span class="nav-path">/ 开发基础</span></a>
</div>
</aside>
<div class="docs-content-wrapper">
<article class="docs-content">
<h1>🚀 三步运行</h1>
<h2>步骤 1：克隆代码</h2>
<pre><code>git clone https://gitee.com/starlight-apk/feature-oss.git
cd feature-oss</code></pre>
<h2>步骤 2：安装依赖</h2>
<pre><code>pip install -r requirements.txt
pip install -e .</code></pre>
<h2>步骤 3：启动服务</h2>
<pre><code>bash start.sh
# 或 Windows: start.bat</code></pre>
<p>启动后访问 <code>http://localhost:8080/</code> 即可看到网站。</p>
<h2>系统要求</h2>
<ul>
<li>Python 3.8+</li>
<li>Linux / macOS / Windows</li>
<li>核心依赖：click、pyyaml、websockets</li>
</ul>
<h2>常用命令</h2>
<table>
<thead><tr><th>命令</th><th>说明</th></tr></thead>
<tbody>
<tr><td><code>oss serve</code></td><td>启动框架服务</td></tr>
<tr><td><code>oss init</code></td><td>初始化项目配置</td></tr>
<tr><td><code>oss version</code></td><td>查看版本号</td></tr>
<tr><td><code>oss status</code></td><td>查看插件运行状态</td></tr>
<tr><td><code>oss pkg install @{作者}/插件名</code></td><td>安装远程插件</td></tr>
<tr><td><code>oss pkg list</code></td><td>列出已安装插件</td></tr>
</tbody>
</table>
</article>
</div>
</div>
</main>
<a href="https://gitee.com/starlight-apk/feature-oss/wikis" target="_blank" class="docs-wiki-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg>
<span>获取更多信息</span>
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="../js/dock.js"></script>
<script src="../js/particles.js"></script>
<script src="../js/parallax.js"></script>
<script src="../js/animations.js"></script>
</body>
</html>

65
website/docs/why-python.html
View File

@@ -16,6 +16,11 @@
<main class="page-docs">
<header class="docs-header">
<button class="docs-hamburger" id="docs-hamburger" aria-label="切换导航菜单">
<span class="docs-hamburger-line"></span>
<span class="docs-hamburger-line"></span>
<span class="docs-hamburger-line"></span>
</button>
<div class="docs-header-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
@@ -28,8 +33,10 @@
</div>
</header>
<div class="docs-sidebar-overlay" id="docs-overlay"></div>
<div class="docs-layout">
<aside class="docs-sidebar">
<aside class="docs-sidebar" id="docs-sidebar">
<div class="docs-nav-section">
<div class="docs-nav-section-title">入门</div>
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
@@ -38,7 +45,6 @@
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">快速开始</div>
<a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
</div>
<div class="docs-nav-section">
<div class="docs-nav-section-title">插件</div>
@@ -94,5 +100,60 @@
<script src="../js/particles.js"></script>
<script src="../js/parallax.js"></script>
<script src="../js/animations.js"></script>
<script>
// 汉堡菜单交互逻辑
(function() {
const hamburger = document.getElementById('docs-hamburger');
const sidebar = document.getElementById('docs-sidebar');
const overlay = document.getElementById('docs-overlay');
if (!hamburger || !sidebar || !overlay) return;
function openSidebar() {
sidebar.classList.add('is-open');
overlay.classList.add('is-visible');
hamburger.classList.add('is-active');
document.body.style.overflow = 'hidden';
}
function closeSidebar() {
sidebar.classList.remove('is-open');
overlay.classList.remove('is-visible');
hamburger.classList.remove('is-active');
document.body.style.overflow = ''';
}
function toggleSidebar() {
if (sidebar.classList.contains('is-open')) {
closeSidebar();
} else {
openSidebar();
}
}
hamburger.addEventListener('click', toggleSidebar);
overlay.addEventListener('click', closeSidebar);
sidebar.querySelectorAll('.docs-nav-item).forEach(link => {
link.addEventListener('click', closeSidebar);
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && sidebar.classList.contains('is-open')) {
closeSidebar();
}
});
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
if (window.innerWidth > 768 && sidebar.classList.contains('is-open')) {
closeSidebar();
}
}, 100);
});
})();
</script>
</body>
</html>

4
website/features.html
View File

@@ -24,13 +24,13 @@
<div id="dock-container"></div>
<main class="page-content">
<div class="page-header" data-parallax-speed="0.7">
<div class="page-header" data-parallax-speed="1.0">
<span class="section-badge">核心能力</span>
<h1 class="page-title">为何选择 <span class="gradient-text">Future OSS</span></h1>
<p class="page-desc">每个模块都为生产环境而设计，为企业提供开箱即用的稳定性保障</p>
</div>
<div class="features-grid" data-parallax-speed="0.25">
<div class="features-grid" data-parallax-speed="1.0">
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/></svg>

6
website/index.html
View File

@@ -24,9 +24,9 @@
<div id="dock-container"></div>
<!-- 首页 Hero -->
<main class="page-hero" data-parallax-speed="0.05">
<main class="page-hero" data-parallax-speed="1.0">
<div class="hero-container">
<div class="hero-content" data-parallax-speed="0.12">
<div class="hero-content" data-parallax-speed="1.0">
<div class="badge">
<span class="badge-dot"></span>
<span>2026 · 插件驱动 · 一切皆可扩展</span>
@@ -38,7 +38,7 @@
<p class="hero-subtitle">一切皆为插件的开发者工具运行时框架</p>
<p class="hero-desc">协议、中间件、通知渠道……所有功能均以插件形式加载。内置熔断降级、依赖自动解析、事件驱动等企业级稳定性机制。</p>
<div class="hero-actions">
<a href="quickstart.html" class="btn btn-primary">
<a href="features.html" class="btn btn-primary">
快速开始
<svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
</a>

2
website/js/dock.js
View File

@@ -29,8 +29,6 @@
{ href: prefix + 'plugins.html', tooltip: '插件', svg: 'M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z' },
{ href: prefix + 'architecture.html', tooltip: '架构', svg: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z' },
{ separator: true },
{ href: prefix + 'quickstart.html', tooltip: '快速开始', svg: 'M13 10V3L4 14h7v7l9-11h-7z' },
{ separator: true },
{ href: 'https://gitee.com/starlight-apk/feature-oss', tooltip: '源码', svg: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4', target: '_blank' }
];

61
website/js/parallax.js
View File

@@ -53,27 +53,27 @@ class ParallaxTracker {
const isMobile = this._isMobileDevice();
// 按优先级尝试输入源
if (isMobile && this._initGyroscope()) {
this.activeSource = 'gyro';
console.log('[Parallax] 使用陀螺仪输入');
} else if (!isMobile && this._initMouse()) {
this.activeSource = 'mouse';
console.log('[Parallax] 使用鼠标输入');
} else if (isMobile) {
// 移动端回退方案：触摸滑动
this._initTouchFallback();
this.activeSource = 'touch';
console.log('[Parallax] 使用触摸滑动输入');
if (isMobile) {
// 移动端优先使用陀螺仪
if (this._initGyroscope()) {
this.activeSource = 'gyro';
console.log('[Parallax] 使用陀螺仪输入');
} else {
// 陀螺仪不可用时使用触摸滑动
this._initTouchFallback();
this.activeSource = 'touch';
console.log('[Parallax] 使用触摸滑动输入');
}
} else {
// 电脑端最后的回退：仍然尝试鼠标
// 桌面端使用鼠标
this._initMouse();
this.activeSource = 'mouse';
console.log('[Parallax] 使用鼠标输入（回退）');
console.log('[Parallax] 使用鼠标输入');
}
// 启动动画循环
this._animate();
console.log(`[Parallax] 已初始化 ${this.elements.length} 个元素`);
console.log(`[Parallax] 已初始化 ${this.elements.length} 个元素，输入源: ${this.activeSource}`);
}
// 检测是否为移动设备
@@ -98,7 +98,10 @@ class ParallaxTracker {
// ── 陀螺仪输入 ──
_initGyroscope() {
if (!window.DeviceOrientationEvent) return false;
if (!window.DeviceOrientationEvent) {
console.log('[Parallax] 设备不支持 DeviceOrientationEvent');
return false;
}
let hasFired = false;
const handler = (e) => {
@@ -123,12 +126,19 @@ class ParallaxTracker {
return false; // 等待用户授权后再启用
}
// Android 和其他设备直接监听
window.addEventListener('deviceorientation', handler);
console.log('[Parallax] 陀螺仪监听已启动（无需权限）');
return true;
}
_addGyroPermissionButton(handler) {
// iOS 设备需要用户交互才能请求陀螺仪权限
// 检查是否已经显示过权限按钮
if (document.getElementById('gyro-permission-btn')) {
return;
}
const btn = document.createElement('div');
btn.id = 'gyro-permission-btn';
btn.innerHTML = `
@@ -152,15 +162,30 @@ class ParallaxTracker {
window.addEventListener('deviceorientation', handler);
this.activeSource = 'gyro';
console.log('[Parallax] 陀螺仪权限已授予');
btn.remove();
} else {
console.warn('[Parallax] 陀螺仪权限被拒绝');
btn.remove();
// 权限被拒绝后使用触摸滑动
this._initTouchFallback();
this.activeSource = 'touch';
}
} catch (err) {
console.warn('[Parallax] 陀螺仪权限被拒绝', err);
console.warn('[Parallax] 陀螺仪权限请求失败', err);
btn.remove();
// 出错时使用触摸滑动
this._initTouchFallback();
this.activeSource = 'touch';
}
btn.remove();
});
// 点击遮罩关闭
btn.querySelector('.gyro-permission-overlay').addEventListener('click', () => btn.remove());
btn.querySelector('.gyro-permission-overlay').addEventListener('click', () => {
btn.remove();
// 用户关闭后使用触摸滑动
this._initTouchFallback();
this.activeSource = 'touch';
});
}
// ── 触摸滑动输入 ──

4
website/plugins.html
View File

@@ -24,13 +24,13 @@
<div id="dock-container"></div>
<main class="page-content">
<div class="page-header" data-parallax-speed="0.8">
<div class="page-header" data-parallax-speed="1.0">
<span class="section-badge">插件生态</span>
<h1 class="page-title">包名格式与<span class="gradient-text">安装流程</span></h1>
<p class="page-desc">简洁且富有表现力的包名格式，让插件管理像呼吸一样自然</p>
</div>
<div class="plugins-content" data-parallax-speed="0.3">
<div class="plugins-content" data-parallax-speed="1.0">
<div class="pkg-format">
<div class="pkg-card">
<span class="pkg-symbol">@{</span>

72
website/quickstart.html
View File

@@ -1,72 +0,0 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>快速开始 - Future OSS</title>
<meta name="description" content="快速上手 Future OSS：环境要求、一键安装、配置初始化、启动服务、安装第一个插件。" />
<meta name="keywords" content="快速开始, 安装教程, 环境配置, Python 3.10+, pip install, 插件安装, oss init, oss serve" />
<meta name="author" content="Falck" />
<meta property="og:title" content="快速开始 - Future OSS" />
<meta property="og:description" content="环境要求、一键安装、配置初始化、启动服务、安装插件" />
<meta property="og:type" content="website" />
<link rel="canonical" href="https://oss-runtime.dev/quickstart" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/dock.css" />
<link rel="stylesheet" href="css/page.css" />
</head>
<body>
<canvas id="particles"></canvas>
<!-- Dock 侧边栏 (由 js/dock.js 动态生成) -->
<div id="dock-container"></div>
<main class="page-content">
<div class="page-header" data-parallax-speed="0.7">
<span class="section-badge">快速开始</span>
<h1 class="page-title">三步即可<span class="gradient-text">运行</span></h1>
<p class="page-desc">从克隆代码到启动服务，只需几分钟</p>
</div>
<div class="steps-grid" data-parallax-speed="0.25">
<div class="step-card">
<div class="step-number">1</div>
<h3 class="step-title">克隆代码</h3>
<pre class="step-code"><code><span class="code-cmd">git clone</span> https://gitee.com/starlight-apk/feature-oss.git
<span class="code-cmd">cd</span> feature-oss</code></pre>
</div>
<div class="step-card">
<div class="step-number">2</div>
<h3 class="step-title">安装依赖</h3>
<pre class="step-code"><code><span class="code-cmd">pip</span> install -r requirements.txt
<span class="code-cmd">pip</span> install -e .</code></pre>
</div>
<div class="step-card">
<div class="step-number">3</div>
<h3 class="step-title">启动服务</h3>
<pre class="step-code"><code><span class="code-cmd">bash</span> start.sh
<span class="code-comment"># 访问 localhost:8080</span></code></pre>
</div>
</div>
<div class="quickstart-links">
<a href="https://gitee.com/starlight-apk/feature-oss/wikis/Home" target="_blank" class="btn btn-primary btn-lg">
查看完整文档
<svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
</a>
<a href="https://gitee.com/starlight-apk/feature-oss" target="_blank" class="btn btn-outline btn-lg">
前往 Gitee 仓库
</a>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="js/dock.js"></script>
<script src="js/particles.js"></script>
<script src="js/parallax.js"></script>
<script src="js/animations.js"></script>
</body>
</html>

7
website/sitemap.xml
View File

@@ -23,13 +23,6 @@
<priority>0.7</priority>
</url>
<url>
<loc>https://oss-runtime.dev/quickstart</loc>
<lastmod>2026-04-05</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://oss-runtime.dev/plugins</loc>
<lastmod>2026-04-05</lastmod>