Skip to content

Commit 603fa42

Browse files
wu-clanwu-clan
committed
update docs
1 parent aab346d commit 603fa42

File tree

9 files changed

+361
-171
lines changed

9 files changed

+361
-171
lines changed

‎docs/.vuepress/client.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import { defineClientConfig } from 'vuepress/client'
22
import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
33
import Layout from './layouts/Layout.vue'
4+
import { h } from 'vue';
5+
import { NotFound } from "vuepress-theme-plume/client";
46

57
import './styles/custom.css'
68
import Swiper from "./components/Swiper.vue";
79
import SponsorPanel from "./components/SponsorPanel.vue";
810
import SponsorHome from './components/SponsorHome.vue';
911
import SponsorSidebar from './components/SponsorSidebar.vue';
1012
import BannerTop from './components/BannerTop.vue';
11-
import { NotFound } from 'vuepress-theme-plume/client';
12-
import { h } from 'vue';
1313
import Pricing from "./components/Pricing.vue";
1414
import PluginMarket from "./components/PluginMarket.vue";
15+
import Planet from "./components/Planet.vue";
1516

1617
export default defineClientConfig({
1718
enhance({ app }) {
@@ -23,6 +24,7 @@ export default defineClientConfig({
2324
app.component('BannerTop', BannerTop)
2425
app.component('Pricing', Pricing)
2526
app.component('PluginMarket', PluginMarket)
27+
app.component('Planet', Planet)
2628
},
2729
layouts: {
2830
Layout,

‎docs/.vuepress/components/Planet.vue

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
<template>
2+
<div class="content-wrapper">
3+
<div class="centered-header">
4+
<h1 class="main-header-text">您正在浏览非公开内容</h1>
5+
</div>
6+
7+
<div class="qr-section">
8+
<button class="qr-toggle" @click="toggleQrOpen">
9+
<span class="qr-toggle-icon" :class="{ 'open': qrOpen }"></span>
10+
扫码订阅
11+
<span v-if="qrOpen">收起</span>
12+
<span v-else>展开</span>
13+
</button>
14+
<div v-if="qrOpen" class="qr-content">
15+
<p>
16+
加入 <a href="https://discord.gg/Sdg6dT5kjz" target="_blank">Discord</a> 社区，可领取免费体验资格
17+
</p>
18+
<img src="https://wu-clan.github.io/picx-images-hosting/知识星球.png" alt="知识星球" class="qr-image" />
19+
</div>
20+
</div>
21+
22+
<p style="text-align: center; color: var(--vp-c-brand);">
23+
如果您已订阅此服务，请直接点击下方链接卡片跳转预览
24+
</p>
25+
26+
<div class="tabs">
27+
<button
28+
v-for="tab in tabs"
29+
:key="tab.id"
30+
@click="activeTab = tab.id"
31+
:class="{ active: activeTab === tab.id }"
32+
>
33+
{{ tab.label }}
34+
</button>
35+
</div>
36+
37+
<div v-if="tabs.find((tab) => tab.id === activeTab)" class="tab-content">
38+
<div class="tab-header">
39+
<div class="tab-description">
40+
<template v-if="activeTab === 'fba'">此分类下的文章可用于 fba 架构，可能无法应用于其他三方架构方案</template>
41+
<template v-if="activeTab === 'fastapi'">此分类下的文章可用于任何基于 FastAPI 框架开发的架构</template>
42+
<template v-if="activeTab === 'plugin'">
43+
此分类下的文章可用于 fba 架构的插件系统
44+
</template>
45+
</div>
46+
</div>
47+
48+
<CardGrid>
49+
<LinkCard
50+
v-for="card in tabs.find((tab) => tab.id === activeTab)!.cards"
51+
:key="card.href"
52+
:title="card.title"
53+
:icon="card.icon"
54+
:href="card.href"
55+
:description="card.description"
56+
/>
57+
</CardGrid>
58+
</div>
59+
</div>
60+
</template>
61+
62+
<script setup lang="ts">
63+
import { ref } from 'vue';
64+
import { Card, fastapiCards, fbaCards, pluginCards } from "../data/planet";
65+
66+
interface Tab {
67+
id: string;
68+
label: string;
69+
cards: Card[];
70+
}
71+
72+
const tabs = ref<Tab[]>([
73+
{ id: 'fba', label: '架构', cards: fbaCards.value },
74+
{ id: 'fastapi', label: '通用', cards: fastapiCards.value },
75+
{ id: 'plugin', label: '插件', cards: pluginCards.value },
76+
]);
77+
78+
const activeTab = ref<string>('fba');
79+
const qrOpen = ref(false);
80+
81+
const toggleQrOpen = () => {
82+
qrOpen.value = !qrOpen.value;
83+
};
84+
</script>
85+
86+
<style scoped>
87+
.content-wrapper {
88+
max-width: 1200px;
89+
margin: 0 auto;
90+
}
91+
92+
.centered-header {
93+
text-align: center;
94+
}
95+
96+
.main-header-text {
97+
color: #fd7600;
98+
font-weight: bold;
99+
margin: 3rem 0 3rem;
100+
}
101+
102+
.qr-section {
103+
margin-bottom: 2rem;
104+
border: 1px solid var(--vp-c-divider);
105+
border-radius: 0.75rem;
106+
background-color: var(--vp-c-bg-soft);
107+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
108+
overflow: hidden;
109+
}
110+
111+
.qr-toggle {
112+
font-weight: 600;
113+
color: var(--vp-c-brand);
114+
cursor: pointer;
115+
padding: 0.75rem 1rem;
116+
display: flex;
117+
align-items: center;
118+
justify-content: center;
119+
width: 100%;
120+
text-align: center;
121+
background: none;
122+
border: none;
123+
transition: background-color 0.2s ease;
124+
}
125+
126+
.qr-toggle:hover {
127+
background-color: rgba(var(--vp-c-brand), 0.05);
128+
}
129+
130+
.qr-toggle-icon {
131+
display: inline-block;
132+
width: 1em;
133+
height: 1em;
134+
margin-right: 0.5em;
135+
border: 0.1em solid var(--vp-c-brand);
136+
border-radius: 50%;
137+
position: relative;
138+
}
139+
140+
.qr-toggle-icon::before {
141+
content: '';
142+
position: absolute;
143+
top: 50%;
144+
left: 50%;
145+
width: 0.6em;
146+
height: 0.1em;
147+
background-color: var(--vp-c-brand);
148+
transform: translate(-50%, -50%);
149+
}
150+
151+
.qr-toggle-icon.open::after {
152+
content: '';
153+
position: absolute;
154+
top: 50%;
155+
left: 50%;
156+
width: 0.1em;
157+
height: 0.6em;
158+
background-color: var(--vp-c-brand);
159+
transform: translate(-50%, -50%);
160+
}
161+
162+
.qr-content {
163+
text-align: center;
164+
padding: 1rem;
165+
border-top: 1px solid var(--vp-c-divider);
166+
}
167+
168+
.qr-image {
169+
max-width: 400px;
170+
width: 100%;
171+
border-radius: 0.5rem;
172+
}
173+
174+
.tabs {
175+
display: flex;
176+
flex-wrap: wrap;
177+
gap: 0.5rem;
178+
border-bottom: 1px solid var(--vp-c-divider);
179+
margin-bottom: 1.5rem;
180+
}
181+
182+
.tabs button {
183+
padding: 0.75rem 1.25rem;
184+
font-size: 1rem;
185+
color: var(--vp-c-text-2);
186+
background: none;
187+
border: none;
188+
cursor: pointer;
189+
}
190+
191+
.tabs button:hover {
192+
color: var(--vp-c-brand);
193+
}
194+
195+
.tabs button.active {
196+
color: var(--vp-c-brand);
197+
border-bottom: 2px solid var(--vp-c-brand);
198+
}
199+
200+
.tab-description {
201+
color: var(--vp-c-text-3);
202+
padding: 0.75rem;
203+
margin-bottom: 0.75rem;
204+
border-left: 3px solid var(--vp-c-divider);
205+
}
206+
207+
@media (min-width: 768px) and (max-width: 959px) {
208+
.content-wrapper {
209+
padding: 2rem;
210+
}
211+
}
212+
213+
@media (min-width: 960px) {
214+
.content-wrapper {
215+
padding: 3rem;
216+
}
217+
}
218+
</style>

0 commit comments

Comments
 (0)