对网页CSS进行重构
This commit is contained in:
Falck
@@ -24,13 +24,13 @@
|
|||||||
<div id="dock-container"></div>
|
<div id="dock-container"></div>
|
||||||
|
|
||||||
<main class="page-content">
|
<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>
|
<span class="section-badge">架构设计</span>
|
||||||
<h1 class="page-title">插件驱动的<span class="gradient-text">分层架构</span></h1>
|
<h1 class="page-title">插件驱动的<span class="gradient-text">分层架构</span></h1>
|
||||||
<p class="page-desc">一切皆为插件，框架本身只提供核心能力</p>
|
<p class="page-desc">一切皆为插件，框架本身只提供核心能力</p>
|
||||||
</div>
|
</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-layer arch-core">
|
||||||
<div class="arch-label">Future OSS 核心</div>
|
<div class="arch-label">Future OSS 核心</div>
|
||||||
<div class="arch-modules">
|
<div class="arch-modules">
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
/* ===== Dock 侧边栏 ===== */
|
/* ===== Dock 侧边栏 - 苹果液态玻璃 ===== */
|
||||||
#dock {
|
#dock {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
@@ -9,30 +9,69 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 12px 8px;
|
padding: 14px 10px;
|
||||||
background: rgba(3, 7, 18, 0.7);
|
/* 苹果液态玻璃 */
|
||||||
backdrop-filter: blur(16px);
|
background: linear-gradient(
|
||||||
border: 1px solid var(--border);
|
135deg,
|
||||||
border-radius: 16px;
|
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 {
|
.dock-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 36px;
|
width: 38px;
|
||||||
height: 36px;
|
height: 38px;
|
||||||
border-radius: 10px;
|
border-radius: 12px;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: all 0.25s ease;
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dock-item:hover, .dock-item.active {
|
.dock-item:hover, .dock-item.active {
|
||||||
color: var(--cyan-light);
|
color: #fff;
|
||||||
background: rgba(6, 182, 212, 0.15);
|
/* 苹果风格高光滑 */
|
||||||
transform: scale(1.15);
|
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 {
|
.dock-item svg {
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部栏 */
|
/* 顶部栏 - 苹果液态玻璃 */
|
||||||
.docs-header {
|
.docs-header {
|
||||||
height: 56px;
|
height: 56px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -16,12 +16,86 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
background: rgba(3, 7, 18, 0.95);
|
/* 苹果液态玻璃 */
|
||||||
border-bottom: 1px solid var(--border);
|
background: linear-gradient(
|
||||||
backdrop-filter: blur(12px);
|
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;
|
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 {
|
.docs-header-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -74,14 +148,42 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 左侧导航 */
|
/* 左侧导航 - 苹果液态玻璃 */
|
||||||
.docs-sidebar {
|
.docs-sidebar {
|
||||||
width: 260px;
|
width: 260px;
|
||||||
flex-shrink: 0;
|
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;
|
overflow-y: auto;
|
||||||
padding: 20px 0;
|
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 {
|
.docs-nav-section {
|
||||||
@@ -126,7 +228,7 @@
|
|||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 左下角固定按钮 */
|
/* 左下角固定按钮 - 苹果液态玻璃 */
|
||||||
.docs-wiki-btn {
|
.docs-wiki-btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 24px;
|
bottom: 24px;
|
||||||
@@ -135,21 +237,39 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
background: linear-gradient(135deg, var(--cyan), var(--blue));
|
/* 苹果液态玻璃按钮 */
|
||||||
border: none;
|
background: linear-gradient(
|
||||||
border-radius: 12px;
|
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;
|
color: #fff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
|
box-shadow:
|
||||||
transition: all 0.2s;
|
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 {
|
.docs-wiki-btn:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px) scale(1.05);
|
||||||
box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4);
|
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 {
|
.docs-wiki-btn svg {
|
||||||
@@ -282,7 +402,130 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@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-content { padding: 24px 20px 100px; }
|
||||||
.docs-wiki-btn span { display: none; }
|
.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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -371,7 +371,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
|
.hero-container {
|
||||||
|
padding: 40px 16px;
|
||||||
|
}
|
||||||
.hero-stats { grid-template-columns: 1fr; gap: 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 {
|
.ripple-container {
|
||||||
width: 240px;
|
width: 240px;
|
||||||
height: 240px;
|
height: 240px;
|
||||||
@@ -391,4 +402,19 @@
|
|||||||
.cube-face-left { transform: rotateY(-90deg) translateZ(70px); }
|
.cube-face-left { transform: rotateY(-90deg) translateZ(70px); }
|
||||||
.cube-face-top { transform: rotateX(90deg) translateZ(70px); }
|
.cube-face-top { transform: rotateX(90deg) translateZ(70px); }
|
||||||
.cube-face-bottom { 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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -87,10 +87,57 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.glass {
|
.glass {
|
||||||
background: var(--bg-glass);
|
/* 苹果液态玻璃效果 */
|
||||||
backdrop-filter: blur(12px);
|
background: linear-gradient(
|
||||||
border: 1px solid var(--border);
|
135deg,
|
||||||
border-radius: 16px;
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 按钮 */
|
/* 按钮 */
|
||||||
|
|||||||
@@ -105,17 +105,40 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.feature-card {
|
.feature-card {
|
||||||
background: var(--bg-glass);
|
/* 苹果液态玻璃 */
|
||||||
border: 1px solid var(--border);
|
background: linear-gradient(
|
||||||
border-radius: 20px;
|
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;
|
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 {
|
.feature-card:hover {
|
||||||
border-color: var(--border-hover);
|
|
||||||
transform: translateY(-8px);
|
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 {
|
.feature-icon {
|
||||||
@@ -195,10 +218,21 @@
|
|||||||
.install-demo {
|
.install-demo {
|
||||||
max-width: 700px;
|
max-width: 700px;
|
||||||
margin: 0 auto 48px;
|
margin: 0 auto 48px;
|
||||||
background: rgba(10, 15, 30, 0.9);
|
/* 苹果液态玻璃 */
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
background: linear-gradient(
|
||||||
border-radius: 16px;
|
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;
|
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 {
|
.demo-header {
|
||||||
@@ -264,14 +298,33 @@
|
|||||||
.arch-diagram { max-width: 900px; margin: 0 auto 64px; }
|
.arch-diagram { max-width: 900px; margin: 0 auto 64px; }
|
||||||
|
|
||||||
.arch-layer {
|
.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;
|
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 {
|
.arch-core {
|
||||||
background: rgba(6, 182, 212, 0.05);
|
background: linear-gradient(
|
||||||
border-color: rgba(6, 182, 212, 0.2);
|
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 {
|
.arch-label {
|
||||||
@@ -330,17 +383,38 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.arch-plugin {
|
.arch-plugin {
|
||||||
background: rgba(255, 255, 255, 0.02);
|
/* 苹果液态玻璃 */
|
||||||
border: 1px solid var(--border);
|
background: linear-gradient(
|
||||||
border-radius: 12px;
|
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;
|
padding: 20px;
|
||||||
text-align: center;
|
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 {
|
.arch-plugin:hover {
|
||||||
border-color: var(--border-hover);
|
|
||||||
transform: translateY(-4px);
|
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 {
|
.arch-plugin-title {
|
||||||
@@ -373,11 +447,38 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
background: var(--bg-glass);
|
/* 苹果液态玻璃 */
|
||||||
border: 1px solid var(--border);
|
background: linear-gradient(
|
||||||
border-radius: 12px;
|
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-size: 14px;
|
||||||
font-weight: 500;
|
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 {
|
.flow-step-num {
|
||||||
@@ -404,17 +505,39 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.step-card {
|
.step-card {
|
||||||
background: var(--bg-glass);
|
/* 苹果液态玻璃 */
|
||||||
border: 1px solid var(--border);
|
background: linear-gradient(
|
||||||
border-radius: 16px;
|
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;
|
padding: 32px;
|
||||||
text-align: center;
|
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 {
|
.step-card:hover {
|
||||||
border-color: var(--border-hover);
|
|
||||||
transform: translateY(-4px);
|
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 {
|
.step-number {
|
||||||
@@ -457,7 +580,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.page-content { padding-left: 24px; }
|
.page-content {
|
||||||
|
padding: 80px 20px 60px;
|
||||||
|
}
|
||||||
.features-grid { grid-template-columns: 1fr; }
|
.features-grid { grid-template-columns: 1fr; }
|
||||||
.arch-plugin-grid { grid-template-columns: 1fr; }
|
.arch-plugin-grid { grid-template-columns: 1fr; }
|
||||||
.steps-grid { grid-template-columns: 1fr; }
|
.steps-grid { grid-template-columns: 1fr; }
|
||||||
@@ -465,4 +590,46 @@
|
|||||||
.flow-arrow { transform: rotate(90deg); }
|
.flow-arrow { transform: rotate(90deg); }
|
||||||
.pkg-explain { grid-template-columns: 1fr; }
|
.pkg-explain { grid-template-columns: 1fr; }
|
||||||
.pkg-table { overflow-x: auto; }
|
.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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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; }
|
|
||||||
}
|
|
||||||
@@ -16,6 +16,11 @@
|
|||||||
|
|
||||||
<main class="page-docs">
|
<main class="page-docs">
|
||||||
<header class="docs-header">
|
<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">
|
<div class="docs-header-title">
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
|
<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"/>
|
<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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="docs-sidebar-overlay" id="docs-overlay"></div>
|
||||||
|
|
||||||
<div class="docs-layout">
|
<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">
|
||||||
<div class="docs-nav-section-title">入门</div>
|
<div class="docs-nav-section-title">入门</div>
|
||||||
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
|
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
|
||||||
@@ -38,7 +45,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="docs-nav-section">
|
<div class="docs-nav-section">
|
||||||
<div class="docs-nav-section-title">快速开始</div>
|
<div class="docs-nav-section-title">快速开始</div>
|
||||||
<a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="docs-nav-section">
|
<div class="docs-nav-section">
|
||||||
<div class="docs-nav-section-title">插件</div>
|
<div class="docs-nav-section-title">插件</div>
|
||||||
@@ -101,5 +107,60 @@
|
|||||||
<script src="../js/particles.js"></script>
|
<script src="../js/particles.js"></script>
|
||||||
<script src="../js/parallax.js"></script>
|
<script src="../js/parallax.js"></script>
|
||||||
<script src="../js/animations.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -16,6 +16,11 @@
|
|||||||
|
|
||||||
<main class="page-docs">
|
<main class="page-docs">
|
||||||
<header class="docs-header">
|
<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">
|
<div class="docs-header-title">
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
|
<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"/>
|
<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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="docs-sidebar-overlay" id="docs-overlay"></div>
|
||||||
|
|
||||||
<div class="docs-layout">
|
<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">
|
||||||
<div class="docs-nav-section-title">入门</div>
|
<div class="docs-nav-section-title">入门</div>
|
||||||
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
|
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
|
||||||
@@ -38,7 +45,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="docs-nav-section">
|
<div class="docs-nav-section">
|
||||||
<div class="docs-nav-section-title">快速开始</div>
|
<div class="docs-nav-section-title">快速开始</div>
|
||||||
<a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="docs-nav-section">
|
<div class="docs-nav-section">
|
||||||
<div class="docs-nav-section-title">插件</div>
|
<div class="docs-nav-section-title">插件</div>
|
||||||
@@ -120,5 +126,60 @@ class MyPlugin(Plugin):
|
|||||||
<script src="../js/particles.js"></script>
|
<script src="../js/particles.js"></script>
|
||||||
<script src="../js/parallax.js"></script>
|
<script src="../js/parallax.js"></script>
|
||||||
<script src="../js/animations.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -16,6 +16,11 @@
|
|||||||
|
|
||||||
<main class="page-docs">
|
<main class="page-docs">
|
||||||
<header class="docs-header">
|
<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">
|
<div class="docs-header-title">
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
|
<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"/>
|
<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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="docs-sidebar-overlay" id="docs-overlay"></div>
|
||||||
|
|
||||||
<div class="docs-layout">
|
<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">
|
||||||
<div class="docs-nav-section-title">入门</div>
|
<div class="docs-nav-section-title">入门</div>
|
||||||
<a href="index.html" class="docs-nav-item active">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
|
<a href="index.html" class="docs-nav-item active">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
|
||||||
@@ -38,7 +45,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="docs-nav-section">
|
<div class="docs-nav-section">
|
||||||
<div class="docs-nav-section-title">快速开始</div>
|
<div class="docs-nav-section-title">快速开始</div>
|
||||||
<a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="docs-nav-section">
|
<div class="docs-nav-section">
|
||||||
<div class="docs-nav-section-title">插件</div>
|
<div class="docs-nav-section-title">插件</div>
|
||||||
@@ -100,6 +106,63 @@
|
|||||||
<script src="../js/parallax.js"></script>
|
<script src="../js/parallax.js"></script>
|
||||||
<script src="../js/animations.js"></script>
|
<script src="../js/animations.js"></script>
|
||||||
<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) {
|
document.querySelectorAll('pre code').forEach(function(block) {
|
||||||
if (typeof hljs !== 'undefined') hljs.highlightElement(block);
|
if (typeof hljs !== 'undefined') hljs.highlightElement(block);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -16,6 +16,11 @@
|
|||||||
|
|
||||||
<main class="page-docs">
|
<main class="page-docs">
|
||||||
<header class="docs-header">
|
<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">
|
<div class="docs-header-title">
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
|
<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"/>
|
<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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="docs-sidebar-overlay" id="docs-overlay"></div>
|
||||||
|
|
||||||
<div class="docs-layout">
|
<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">
|
||||||
<div class="docs-nav-section-title">入门</div>
|
<div class="docs-nav-section-title">入门</div>
|
||||||
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
|
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
|
||||||
@@ -38,7 +45,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="docs-nav-section">
|
<div class="docs-nav-section">
|
||||||
<div class="docs-nav-section-title">快速开始</div>
|
<div class="docs-nav-section-title">快速开始</div>
|
||||||
<a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="docs-nav-section">
|
<div class="docs-nav-section">
|
||||||
<div class="docs-nav-section-title">插件</div>
|
<div class="docs-nav-section-title">插件</div>
|
||||||
@@ -86,5 +92,60 @@
|
|||||||
<script src="../js/particles.js"></script>
|
<script src="../js/particles.js"></script>
|
||||||
<script src="../js/parallax.js"></script>
|
<script src="../js/parallax.js"></script>
|
||||||
<script src="../js/animations.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -16,6 +16,11 @@
|
|||||||
|
|
||||||
<main class="page-docs">
|
<main class="page-docs">
|
||||||
<header class="docs-header">
|
<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">
|
<div class="docs-header-title">
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="22" height="22">
|
<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"/>
|
<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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="docs-sidebar-overlay" id="docs-overlay"></div>
|
||||||
|
|
||||||
<div class="docs-layout">
|
<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">
|
||||||
<div class="docs-nav-section-title">入门</div>
|
<div class="docs-nav-section-title">入门</div>
|
||||||
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
|
<a href="index.html" class="docs-nav-item">什么是 FutureOSS<span class="nav-path">/ 项目介绍</span></a>
|
||||||
@@ -38,7 +45,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="docs-nav-section">
|
<div class="docs-nav-section">
|
||||||
<div class="docs-nav-section-title">快速开始</div>
|
<div class="docs-nav-section-title">快速开始</div>
|
||||||
<a href="quickstart.html" class="docs-nav-item">三步运行<span class="nav-path">/ 安装部署</span></a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="docs-nav-section">
|
<div class="docs-nav-section">
|
||||||
<div class="docs-nav-section-title">插件</div>
|
<div class="docs-nav-section-title">插件</div>
|
||||||
@@ -94,5 +100,60 @@
|
|||||||
<script src="../js/particles.js"></script>
|
<script src="../js/particles.js"></script>
|
||||||
<script src="../js/parallax.js"></script>
|
<script src="../js/parallax.js"></script>
|
||||||
<script src="../js/animations.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -24,13 +24,13 @@
|
|||||||
<div id="dock-container"></div>
|
<div id="dock-container"></div>
|
||||||
|
|
||||||
<main class="page-content">
|
<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>
|
<span class="section-badge">核心能力</span>
|
||||||
<h1 class="page-title">为何选择 <span class="gradient-text">Future OSS</span></h1>
|
<h1 class="page-title">为何选择 <span class="gradient-text">Future OSS</span></h1>
|
||||||
<p class="page-desc">每个模块都为生产环境而设计，为企业提供开箱即用的稳定性保障</p>
|
<p class="page-desc">每个模块都为生产环境而设计，为企业提供开箱即用的稳定性保障</p>
|
||||||
</div>
|
</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-card">
|
||||||
<div class="feature-icon">
|
<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>
|
<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>
|
||||||
|
|||||||
@@ -24,9 +24,9 @@
|
|||||||
<div id="dock-container"></div>
|
<div id="dock-container"></div>
|
||||||
|
|
||||||
<!-- 首页 Hero -->
|
<!-- 首页 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-container">
|
||||||
<div class="hero-content" data-parallax-speed="0.12">
|
<div class="hero-content" data-parallax-speed="1.0">
|
||||||
<div class="badge">
|
<div class="badge">
|
||||||
<span class="badge-dot"></span>
|
<span class="badge-dot"></span>
|
||||||
<span>2026 · 插件驱动 · 一切皆可扩展</span>
|
<span>2026 · 插件驱动 · 一切皆可扩展</span>
|
||||||
@@ -38,7 +38,7 @@
|
|||||||
<p class="hero-subtitle">一切皆为插件的开发者工具运行时框架</p>
|
<p class="hero-subtitle">一切皆为插件的开发者工具运行时框架</p>
|
||||||
<p class="hero-desc">协议、中间件、通知渠道……所有功能均以插件形式加载。内置熔断降级、依赖自动解析、事件驱动等企业级稳定性机制。</p>
|
<p class="hero-desc">协议、中间件、通知渠道……所有功能均以插件形式加载。内置熔断降级、依赖自动解析、事件驱动等企业级稳定性机制。</p>
|
||||||
<div class="hero-actions">
|
<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>
|
<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>
|
</a>
|
||||||
|
|||||||
@@ -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 + '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' },
|
{ 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 },
|
{ 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' }
|
{ href: 'https://gitee.com/starlight-apk/feature-oss', tooltip: '源码', svg: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4', target: '_blank' }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@@ -53,27 +53,27 @@ class ParallaxTracker {
|
|||||||
const isMobile = this._isMobileDevice();
|
const isMobile = this._isMobileDevice();
|
||||||
|
|
||||||
// 按优先级尝试输入源
|
// 按优先级尝试输入源
|
||||||
if (isMobile && this._initGyroscope()) {
|
if (isMobile) {
|
||||||
|
// 移动端优先使用陀螺仪
|
||||||
|
if (this._initGyroscope()) {
|
||||||
this.activeSource = 'gyro';
|
this.activeSource = 'gyro';
|
||||||
console.log('[Parallax] 使用陀螺仪输入');
|
console.log('[Parallax] 使用陀螺仪输入');
|
||||||
} else if (!isMobile && this._initMouse()) {
|
} else {
|
||||||
this.activeSource = 'mouse';
|
// 陀螺仪不可用时使用触摸滑动
|
||||||
console.log('[Parallax] 使用鼠标输入');
|
|
||||||
} else if (isMobile) {
|
|
||||||
// 移动端回退方案：触摸滑动
|
|
||||||
this._initTouchFallback();
|
this._initTouchFallback();
|
||||||
this.activeSource = 'touch';
|
this.activeSource = 'touch';
|
||||||
console.log('[Parallax] 使用触摸滑动输入');
|
console.log('[Parallax] 使用触摸滑动输入');
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// 电脑端最后的回退：仍然尝试鼠标
|
// 桌面端使用鼠标
|
||||||
this._initMouse();
|
this._initMouse();
|
||||||
this.activeSource = 'mouse';
|
this.activeSource = 'mouse';
|
||||||
console.log('[Parallax] 使用鼠标输入（回退）');
|
console.log('[Parallax] 使用鼠标输入');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 启动动画循环
|
// 启动动画循环
|
||||||
this._animate();
|
this._animate();
|
||||||
console.log(`[Parallax] 已初始化 ${this.elements.length} 个元素`);
|
console.log(`[Parallax] 已初始化 ${this.elements.length} 个元素，输入源: ${this.activeSource}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 检测是否为移动设备
|
// 检测是否为移动设备
|
||||||
@@ -98,7 +98,10 @@ class ParallaxTracker {
|
|||||||
|
|
||||||
// ── 陀螺仪输入 ──
|
// ── 陀螺仪输入 ──
|
||||||
_initGyroscope() {
|
_initGyroscope() {
|
||||||
if (!window.DeviceOrientationEvent) return false;
|
if (!window.DeviceOrientationEvent) {
|
||||||
|
console.log('[Parallax] 设备不支持 DeviceOrientationEvent');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
let hasFired = false;
|
let hasFired = false;
|
||||||
const handler = (e) => {
|
const handler = (e) => {
|
||||||
@@ -123,12 +126,19 @@ class ParallaxTracker {
|
|||||||
return false; // 等待用户授权后再启用
|
return false; // 等待用户授权后再启用
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Android 和其他设备直接监听
|
||||||
window.addEventListener('deviceorientation', handler);
|
window.addEventListener('deviceorientation', handler);
|
||||||
|
console.log('[Parallax] 陀螺仪监听已启动（无需权限）');
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
_addGyroPermissionButton(handler) {
|
_addGyroPermissionButton(handler) {
|
||||||
// iOS 设备需要用户交互才能请求陀螺仪权限
|
// iOS 设备需要用户交互才能请求陀螺仪权限
|
||||||
|
// 检查是否已经显示过权限按钮
|
||||||
|
if (document.getElementById('gyro-permission-btn')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const btn = document.createElement('div');
|
const btn = document.createElement('div');
|
||||||
btn.id = 'gyro-permission-btn';
|
btn.id = 'gyro-permission-btn';
|
||||||
btn.innerHTML = `
|
btn.innerHTML = `
|
||||||
@@ -152,15 +162,30 @@ class ParallaxTracker {
|
|||||||
window.addEventListener('deviceorientation', handler);
|
window.addEventListener('deviceorientation', handler);
|
||||||
this.activeSource = 'gyro';
|
this.activeSource = 'gyro';
|
||||||
console.log('[Parallax] 陀螺仪权限已授予');
|
console.log('[Parallax] 陀螺仪权限已授予');
|
||||||
|
btn.remove();
|
||||||
|
} else {
|
||||||
|
console.warn('[Parallax] 陀螺仪权限被拒绝');
|
||||||
|
btn.remove();
|
||||||
|
// 权限被拒绝后使用触摸滑动
|
||||||
|
this._initTouchFallback();
|
||||||
|
this.activeSource = 'touch';
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.warn('[Parallax] 陀螺仪权限被拒绝', err);
|
console.warn('[Parallax] 陀螺仪权限请求失败', err);
|
||||||
}
|
|
||||||
btn.remove();
|
btn.remove();
|
||||||
|
// 出错时使用触摸滑动
|
||||||
|
this._initTouchFallback();
|
||||||
|
this.activeSource = 'touch';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 点击遮罩关闭
|
// 点击遮罩关闭
|
||||||
btn.querySelector('.gyro-permission-overlay').addEventListener('click', () => btn.remove());
|
btn.querySelector('.gyro-permission-overlay').addEventListener('click', () => {
|
||||||
|
btn.remove();
|
||||||
|
// 用户关闭后使用触摸滑动
|
||||||
|
this._initTouchFallback();
|
||||||
|
this.activeSource = 'touch';
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── 触摸滑动输入 ──
|
// ── 触摸滑动输入 ──
|
||||||
|
|||||||
@@ -24,13 +24,13 @@
|
|||||||
<div id="dock-container"></div>
|
<div id="dock-container"></div>
|
||||||
|
|
||||||
<main class="page-content">
|
<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>
|
<span class="section-badge">插件生态</span>
|
||||||
<h1 class="page-title">包名格式与<span class="gradient-text">安装流程</span></h1>
|
<h1 class="page-title">包名格式与<span class="gradient-text">安装流程</span></h1>
|
||||||
<p class="page-desc">简洁且富有表现力的包名格式，让插件管理像呼吸一样自然</p>
|
<p class="page-desc">简洁且富有表现力的包名格式，让插件管理像呼吸一样自然</p>
|
||||||
</div>
|
</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-format">
|
||||||
<div class="pkg-card">
|
<div class="pkg-card">
|
||||||
<span class="pkg-symbol">@{</span>
|
<span class="pkg-symbol">@{</span>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -23,13 +23,6 @@
|
|||||||
<priority>0.7</priority>
|
<priority>0.7</priority>
|
||||||
</url>
|
</url>
|
||||||
|
|
||||||
<url>
|
|
||||||
<loc>https://oss-runtime.dev/quickstart</loc>
|
|
||||||
<lastmod>2026-04-05</lastmod>
|
|
||||||
<changefreq>monthly</changefreq>
|
|
||||||
<priority>0.9</priority>
|
|
||||||
</url>
|
|
||||||
|
|
||||||
<url>
|
<url>
|
||||||
<loc>https://oss-runtime.dev/plugins</loc>
|
<loc>https://oss-runtime.dev/plugins</loc>
|
||||||
<lastmod>2026-04-05</lastmod>
|
<lastmod>2026-04-05</lastmod>
|
||||||
|
|||||||
Reference in New Issue
Block a user