Skip to content

Commit f01ea9f

Browse files
wu-clanwu-clan
committed
update docs
1 parent 615247f commit f01ea9f

File tree

9 files changed

+203
-40
lines changed

9 files changed

+203
-40
lines changed

‎docs/.DS_Store‎

6 KB
Binary file not shown.

‎docs/.vuepress/bulletin.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { BulletinOptions } from "vuepress-theme-plume";
22

33
export const myBulletin: BulletinOptions = {
4-
enablePage: true,
4+
enablePage: false,
55
lifetime: 'session',
66
contentType: 'markdown',
7-
title: '通知/公告',
7+
title: '公告',
88
content: '插件系统已发布, 欢迎体验和共创 🤗',
99
}

‎docs/.vuepress/client.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import Swiper from "./components/Swiper.vue";
77
import SponsorPanel from "./components/SponsorPanel.vue";
88
import SponsorHome from './components/SponsorHome.vue';
99
import SponsorSidebar from './components/SponsorSidebar.vue';
10+
import BannerTop from './components/BannerTop.vue';
11+
import { NotFound } from 'vuepress-theme-plume/client';
12+
import { h } from 'vue';
1013

1114
export default defineClientConfig({
1215
enhance({ app }) {
@@ -15,8 +18,12 @@ export default defineClientConfig({
1518
app.component('SponsorPanel', SponsorPanel)
1619
app.component('SponsorHome', SponsorHome)
1720
app.component('SponsorSidebar', SponsorSidebar)
21+
app.component('BannerTop', BannerTop)
1822
},
1923
layouts: {
2024
Layout,
25+
NotFound: () => h(NotFound, null, {
26+
'layout-top': () => h(BannerTop),
27+
}),
2128
}
2229
})

‎docs/.vuepress/components/BannerTop.vue‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<script setup>
2+
import { ref, onMounted } from "vue";
3+
4+
const isDismissed = ref(false);
5+
6+
function dismiss() {
7+
isDismissed.value = true;
8+
sessionStorage.setItem("fba-docs-banner-top", "true");
9+
updateDocumentClass();
10+
}
11+
12+
function updateDocumentClass() {
13+
if (isDismissed.value) {
14+
document.documentElement.classList.add("banner-dismissed");
15+
} else {
16+
document.documentElement.classList.remove("banner-dismissed");
17+
}
18+
}
19+
20+
onMounted(() => {
21+
isDismissed.value = sessionStorage.getItem("fba-docs-banner-top") === "true";
22+
updateDocumentClass();
23+
});
24+
</script>
25+
26+
<template>
27+
<div class="banner" v-if="!isDismissed">
28+
<p class="vp-banner-text">
29+
<span class="vp-text-primary">FBA </span>
30+
<span class="vp-tagline">· FasAPI</span>
31+
<span class="vp-place"> 最佳架构</span>
32+
<span class="vp-date"> · 插件系统已发布</span>
33+
<a class="vp-primary-action" href="/fastapi_best_architecture_docs/plugin/before.html"> 甩起来 </a>
34+
</p>
35+
<button @click="dismiss">
36+
<Icon name="mingcute:close-fill" />
37+
</button>
38+
<p class="vp-banner-text vp-coupon">
39+
<span class="vp-text-primary">代码</span> 有 BUG？
40+
<span class="vp-text-primary"> 请通过互动与我们反馈！</span>
41+
</p>
42+
</div>
43+
</template>
44+
45+
<style>
46+
html:not(.banner-dismissed) {
47+
--vp-layout-top-height: 60px;
48+
}
49+
</style>
50+
51+
<style scoped>
52+
.banner {
53+
position: absolute;
54+
z-index: 100;
55+
top: 0;
56+
left: 0;
57+
right: 0;
58+
height: var(--vp-layout-top-height);
59+
text-align: center;
60+
font-size: 13px;
61+
font-weight: 600;
62+
color: #fff;
63+
background: #161618;
64+
display: flex;
65+
justify-content: center;
66+
align-items: center;
67+
max-width: 100%;
68+
max-height: 100%;
69+
}
70+
71+
.banner-dismissed .banner {
72+
display: none;
73+
}
74+
75+
a:hover {
76+
text-decoration: underline;
77+
}
78+
79+
button {
80+
position: absolute;
81+
right: 0;
82+
top: 0;
83+
padding: 10px 10px;
84+
}
85+
86+
.vp-banner-text {
87+
font-size: 16px;
88+
}
89+
90+
.vp-text-primary {
91+
color: var(--vp-c-brand-1);
92+
}
93+
94+
.vp-primary-action {
95+
background: var(--vp-c-brand-1);
96+
color: #121c1a;
97+
padding: 8px 15px;
98+
border-radius: 5px;
99+
font-size: 14px;
100+
text-decoration: none;
101+
margin: 0 10px;
102+
font-weight: bold;
103+
}
104+
105+
.vp-primary-action:hover {
106+
text-decoration: none;
107+
background: #75c05e;
108+
}
109+
110+
@media (max-width: 1280px) {
111+
.banner .vp-banner-text {
112+
font-size: 14px;
113+
}
114+
}
115+
116+
@media (max-width: 780px) {
117+
.vp-tagline {
118+
display: none;
119+
}
120+
.vp-primary-action {
121+
padding: 5px 5px;
122+
}
123+
124+
.vp-time-now {
125+
display: none;
126+
}
127+
}
128+
129+
@media (max-width: 579px) {
130+
.vp-place {
131+
display: none;
132+
}
133+
.vp-date {
134+
display: none;
135+
}
136+
}
137+
</style>

‎docs/.vuepress/components/SponsorHome.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ import { homeSponsor } from "../data/sponsors";
6666
filter: grayscale(1) invert(1);
6767
}
6868
69-
@media (max-width: 576px) {
69+
@media (max-width: 579px) {
7070
#special-spsr {
7171
flex-direction: column;
7272
}

‎docs/.vuepress/components/SponsorPanel.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
22
<div class="sponsor-header" @click="toggleCollapse">
33
<span>倾情赞助</span>
4-
<span class="toggle-icon">{{ isCollapsed ? "<" : ">" }}</span>
4+
<span class="toggle-icon">
5+
<Icon v-if="isCollapsed" name="iconamoon:arrow-right-2"/>
6+
<Icon v-else name="iconamoon:arrow-down-2"/>
7+
</span>
58
</div>
69
<div class="sponsor-container" v-if="!isCollapsed">
710
<div class="gold-sponsors">

‎docs/.vuepress/components/SponsorSidebar.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<span>独家赞助</span>
44
</div>
55
<div class="sponsor-container">
6-
<div class="sidebar-sponsors">
6+
<div class="sidebar-sponsor">
77
<div class="sponsor" @click="openSponsorLink(homeSponsor.href)">
88
<img v-if="homeSponsor.link" :src="homeSponsor.link" :alt="homeSponsor.alt" class="sponsor-image" />
99
<span v-else class="sponsor-text">{{ homeSponsor.text }}</span>
@@ -24,7 +24,6 @@ const openSponsorLink = (href) => {
2424
.sponsor-header {
2525
font-size: 11px;
2626
color: var(--vp-c-text-3);
27-
margin-top: 3px;
2827
}
2928
3029
.sponsor-container {
@@ -33,7 +32,7 @@ const openSponsorLink = (href) => {
3332
gap: 5px;
3433
}
3534
36-
.sidebar-sponsors {
35+
.sidebar-sponsor {
3736
display: flex;
3837
flex-direction: column;
3938
gap: 5px;

‎docs/.vuepress/layouts/Layout.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ import SponsorPanel from "../components/SponsorPanel.vue";
1515
<SponsorSidebar />
1616
</div>
1717
</template>
18+
<template #layout-top>
19+
<div class="custom-content">
20+
<BannerTop />
21+
</div>
22+
</template>
1823
</Layout>
1924
</template>
2025

‎docs/.vuepress/styles/custom.css‎

Lines changed: 45 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,65 @@
11
:root {
2-
/* 公告宽度 */
3-
/*--vp-bulletin-width: 333px;*/
4-
/* 链接颜色、强调色 */
5-
--vp-c-brand-1: rgba(0, 148, 133, 1);
6-
/* 链接、按钮 hover 颜色 */
7-
--vp-c-brand-2: rgba(0, 148, 133, 1);
8-
/* 背景色、边框色 */
9-
--vp-c-brand-3: rgba(0, 148, 133, 1);
10-
11-
/* 导航栏分组 */
12-
.vp-menu-group {
13-
.title {
14-
color: rgba(60, 60, 60, .33);
15-
}
2+
/* 公告宽度 */
3+
/*--vp-bulletin-width: 333px;*/
4+
/* 链接颜色、强调色 */
5+
--vp-c-brand-1: rgba(0, 148, 133, 1);
6+
/* 链接、按钮 hover 颜色 */
7+
--vp-c-brand-2: rgba(0, 148, 133, 1);
8+
/* 背景色、边框色 */
9+
--vp-c-brand-3: rgba(0, 148, 133, 1);
10+
11+
/* 导航栏分组 */
12+
.vp-menu-group {
13+
.title {
14+
color: rgba(60, 60, 60, 0.33);
1615
}
16+
}
1717
}
1818

1919
[data-theme="dark"] {
20-
/* 链接颜色、强调色 */
21-
--vp-c-brand-1: rgba(0, 148, 133, 1);
22-
/* 链接、按钮 hover 颜色 */
23-
--vp-c-brand-2: rgba(0, 148, 133, 1);
24-
/* 背景色、边框色 */
25-
--vp-c-brand-3: rgba(0, 148, 133, 1);
26-
27-
/* 导航栏分组 */
28-
.vp-menu-group {
29-
.title {
30-
color: rgba(235, 235, 235, .38);
31-
}
20+
/* 链接颜色、强调色 */
21+
--vp-c-brand-1: rgba(0, 148, 133, 1);
22+
/* 链接、按钮 hover 颜色 */
23+
--vp-c-brand-2: rgba(0, 148, 133, 1);
24+
/* 背景色、边框色 */
25+
--vp-c-brand-3: rgba(0, 148, 133, 1);
26+
27+
/* 导航栏分组 */
28+
.vp-menu-group {
29+
.title {
30+
color: rgba(235, 235, 235, 0.38);
3231
}
32+
}
3333
}
3434

3535
/* 首页副标题 */
3636
.hero-tagline {
37-
color: unset !important;
37+
color: unset !important;
3838
}
3939

4040
/* 首页文字说明 */
4141
.hero-text {
42-
margin: 24px 0 40px !important;
42+
margin: 24px 0 40px !important;
4343
}
4444

4545
.vp-swiper .swiper-slide-img {
46-
/* 轮播图图片拉伸效果 */
47-
object-fit: fill;
46+
/* 轮播图图片拉伸效果 */
47+
object-fit: fill;
4848
}
4949

5050
.swiper-slide-custom-container {
51-
/* 轮播图边框 */
52-
border: 1px solid rgb(177 177 177 / 66%) !important;
53-
}
51+
/* 轮播图边框 */
52+
border: 1px solid rgb(177 177 177 / 66%) !important;
53+
}
54+
55+
/* 文档页左侧边栏赞助位，如果提供 top 插槽，则更新 */
56+
#SidebarNav > div.custom-content {
57+
position: sticky;
58+
top: 0;
59+
background-color: var(--vp-sidebar-bg-color);
60+
z-index: 10;
61+
62+
@media (max-width: 959px) {
63+
top: -32px;
64+
}
65+
}

0 commit comments

Comments
 (0)