Skip to content

Commit 4cd3709

Browse files
wu-clanwu-clan
committed
update docs
1 parent 28f880e commit 4cd3709

File tree

12 files changed

+372
-167
lines changed

12 files changed

+372
-167
lines changed

‎docs/.vuepress/client.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import BannerTop from './components/BannerTop.vue';
1111
import { NotFound } from 'vuepress-theme-plume/client';
1212
import { h } from 'vue';
1313
import Price from "./components/Price.vue";
14+
import PluginMarket from "./components/PluginMarket.vue";
1415

1516
export default defineClientConfig({
1617
enhance({ app }) {
@@ -21,6 +22,7 @@ export default defineClientConfig({
2122
app.component('SponsorSidebar', SponsorSidebar)
2223
app.component('BannerTop', BannerTop)
2324
app.component('Price', Price)
25+
app.component('PluginMarket', PluginMarket)
2426
},
2527
layouts: {
2628
Layout,

‎docs/.vuepress/components/AsideNavAfter.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
<script lang="ts" setup>
2-
import { VPLink } from 'vuepress-theme-plume/client'
3-
</script>
4-
51
<template>
62
<div class="aside-nav-wrapper">
73
<VPLink class="link" href="https://github.com/fastapi-practices/fastapi_best_architecture" no-icon>
@@ -17,6 +13,10 @@ import { VPLink } from 'vuepress-theme-plume/client'
1713
</div>
1814
</template>
1915

16+
<script lang="ts" setup>
17+
import { VPLink } from 'vuepress-theme-plume/client'
18+
</script>
19+
2020
<style scoped>
2121
.aside-nav-wrapper {
2222
display: flex;

‎docs/.vuepress/components/BannerTop.vue

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
<template>
2+
<div class="banner">
3+
<p class="vp-banner-text">
4+
<span class="vp-text-primary">FBA </span>
5+
<span class="vp-tagline">· FasAPI</span>
6+
<span class="vp-place"> 最佳架构</span>
7+
<span class="vp-date"> · 插件系统已发布</span>
8+
<a class="vp-primary-action" href="/fastapi_best_architecture_docs/plugin/before.html"> 甩起来 </a>
9+
</p>
10+
<button @click="dismiss">
11+
<Icon name="mingcute:close-fill" />
12+
</button>
13+
<p class="vp-banner-text vp-coupon">
14+
<span class="vp-text-primary">代码</span> 有 BUG？
15+
<span class="vp-text-primary"> 请通过互动与我们反馈！</span>
16+
</p>
17+
</div>
18+
</template>
19+
120
<script setup>
221
import { useStorage } from "@vueuse/core";
322
@@ -20,25 +39,6 @@ function updateDocumentClass() {
2039
updateDocumentClass();
2140
</script>
2241

23-
<template>
24-
<div class="banner">
25-
<p class="vp-banner-text">
26-
<span class="vp-text-primary">FBA </span>
27-
<span class="vp-tagline">· FasAPI</span>
28-
<span class="vp-place"> 最佳架构</span>
29-
<span class="vp-date"> · 插件系统已发布</span>
30-
<a class="vp-primary-action" href="/fastapi_best_architecture_docs/plugin/before.html"> 甩起来 </a>
31-
</p>
32-
<button @click="dismiss">
33-
<Icon name="mingcute:close-fill" />
34-
</button>
35-
<p class="vp-banner-text vp-coupon">
36-
<span class="vp-text-primary">代码</span> 有 BUG？
37-
<span class="vp-text-primary"> 请通过互动与我们反馈！</span>
38-
</p>
39-
</div>
40-
</template>
41-
4242
<style>
4343
html:not(.banner-dismissed) {
4444
--vp-layout-top-height: 60px;

‎docs/.vuepress/components/PluginMarket.vue

Lines changed: 257 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,257 @@
1+
<template>
2+
<div class="plugin-card-container">
3+
<div v-for="(item, index) in items" :key="index" class="plugin-card">
4+
<div class="card-image">
5+
<img
6+
v-if="item.image"
7+
:src="item.image"
8+
:alt="item.title"
9+
class="image-content"
10+
>
11+
<div v-else class="image-placeholder">
12+
<VPIconify
13+
:name="item.icon"
14+
size="3em"
15+
color="var(--vp-c-brand)"
16+
/>
17+
</div>
18+
</div>
19+
<div class="card-content">
20+
<div class="card-header">
21+
<div class="card-title-group">
22+
<h3 class="card-title">{{ item.title }}</h3>
23+
</div>
24+
25+
<a
26+
v-if="item.link"
27+
:href="item.link"
28+
class="github-link no-external-icon"
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
aria-label="GitHub仓库"
32+
>
33+
<VPIconify name="mdi:github" size="2em" color="var(--vp-c-text-2)" />
34+
</a>
35+
<div v-else class="built-in-label">
36+
内置
37+
</div>
38+
</div>
39+
<p class="card-description">{{ item.description }}</p>
40+
<div class="card-tags">
41+
<Badge
42+
v-for="(tag, tagIndex) in item.tags"
43+
:key="tagIndex"
44+
:text="tag"
45+
v-bind="getTagColors(tag)"
46+
/>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</template>
52+
53+
<script setup lang="ts">
54+
import VPIconify from 'vuepress-theme-plume/components/VPIconify.vue'
55+
56+
57+
export interface PluginItem {
58+
icon: string
59+
title: string
60+
description: string
61+
tags: string[]
62+
link?: string
63+
image?: string
64+
}
65+
66+
const props = withDefaults(defineProps<{
67+
items: PluginItem[]
68+
columns?: number
69+
}>(), {
70+
columns: 3
71+
})
72+
73+
interface TagColors {
74+
color?: string;
75+
bgColor?: string;
76+
borderColor?: string;
77+
}
78+
79+
const getTagColors = (tag: string): TagColors => {
80+
const colors: Record<string, TagColors> = {
81+
'MySQL': { color: '#006484', bgColor: 'rgba(0, 100, 132, 0.1)', borderColor: 'rgba(0, 100, 132, 0.2)' },
82+
'PostgreSQL': { color: '#336699', bgColor: 'rgba(51, 102, 153, 0.1)', borderColor: 'rgba(51, 102, 153, 0.2)' },
83+
'fba': { color: '#8b5cf6', bgColor: 'rgba(139, 92, 246, 0.1)', borderColor: 'rgba(139, 92, 246, 0.2)' },
84+
'fba_ui': { color: '#a855f7', bgColor: 'rgba(168, 85, 247, 0.1)', borderColor: 'rgba(168, 85, 247, 0.2)' },
85+
'app': { color: '#f97316', bgColor: 'rgba(249, 115, 22, 0.1)', borderColor: 'rgba(249, 115, 22, 0.2)' },
86+
'extra': { color: '#64748b', bgColor: 'rgba(100, 116, 139, 0.1)', borderColor: 'rgba(100, 116, 139, 0.2)' },
87+
'pay': { color: '#ef4444', bgColor: 'rgba(239, 68, 68, 0.1)', borderColor: 'rgba(239, 68, 68, 0.2)' },
88+
'free': { color: '#10b981', bgColor: 'rgba(16, 185, 129, 0.1)', borderColor: 'rgba(16, 185, 129, 0.2)' }
89+
};
90+
return colors[tag] || {
91+
color: 'var(--vp-c-text-2)',
92+
bgColor: 'var(--vp-c-bg-soft)',
93+
borderColor: 'var(--vp-c-divider-light)'
94+
};
95+
}
96+
</script>
97+
98+
<style scoped>
99+
.plugin-card-container {
100+
display: grid;
101+
gap: 1.5rem;
102+
grid-template-columns: repeat(1, 1fr);
103+
}
104+
105+
.plugin-card {
106+
display: flex;
107+
flex-direction: column;
108+
background-color: var(--vp-c-bg);
109+
border-radius: 8px;
110+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
111+
overflow: hidden;
112+
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
113+
height: 100%;
114+
border: 1px solid var(--vp-c-divider);
115+
}
116+
117+
.plugin-card:hover {
118+
transform: translateY(-4px);
119+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
120+
border-color: var(--vp-c-brand);
121+
}
122+
123+
.card-image {
124+
width: 100%;
125+
height: 160px;
126+
overflow: hidden;
127+
background: var(--vp-c-bg-soft);
128+
position: relative;
129+
display: flex;
130+
align-items: center;
131+
justify-content: center;
132+
}
133+
134+
.image-content {
135+
transition: transform 0.5s ease;
136+
}
137+
138+
.plugin-card:hover .image-content {
139+
transform: scale(1.05);
140+
}
141+
142+
.image-placeholder {
143+
width: 100%;
144+
height: 100%;
145+
display: flex;
146+
align-items: center;
147+
justify-content: center;
148+
background: var(--vp-c-bg-soft);
149+
}
150+
151+
.card-content {
152+
padding: 1.25rem;
153+
flex-grow: 1;
154+
display: flex;
155+
flex-direction: column;
156+
}
157+
158+
.card-header {
159+
display: flex;
160+
justify-content: space-between;
161+
align-items: center;
162+
margin-bottom: 0.75rem;
163+
gap: 0.5rem;
164+
}
165+
166+
.card-title-group {
167+
display: flex;
168+
align-items: center;
169+
gap: 0.5rem;
170+
flex-grow: 1;
171+
min-width: 0;
172+
}
173+
174+
.card-title {
175+
font-size: 1.05rem;
176+
font-weight: 600;
177+
color: var(--vp-c-text-1);
178+
margin: 0;
179+
line-height: 1.4;
180+
overflow: hidden;
181+
text-overflow: ellipsis;
182+
white-space: nowrap;
183+
}
184+
185+
.github-link {
186+
transition: all 0.2s ease;
187+
display: flex;
188+
align-items: center;
189+
justify-content: center;
190+
padding: 0.1rem;
191+
border-radius: 6px;
192+
flex-shrink: 0;
193+
}
194+
195+
.github-link:hover {
196+
background-color: var(--vp-c-bg-soft);
197+
}
198+
199+
.github-link:hover :deep(.iconify-svg) {
200+
color: var(--vp-c-brand);
201+
transform: scale(1.1);
202+
}
203+
204+
.no-external-icon {
205+
display: inline-flex;
206+
align-items: center;
207+
}
208+
209+
.no-external-icon::after {
210+
content: none !important;
211+
}
212+
213+
.built-in-label {
214+
font-size: 0.875rem;
215+
color: var(--vp-c-text-3);
216+
background-color: var(--vp-c-bg-soft);
217+
padding: 0.25rem 0.5rem;
218+
border-radius: 4px;
219+
flex-shrink: 0;
220+
margin-left: auto;
221+
}
222+
223+
.card-description {
224+
color: var(--vp-c-text-2);
225+
font-size: 0.875rem;
226+
line-height: 1.5;
227+
margin: 0.5rem 0 1rem;
228+
flex-grow: 1;
229+
}
230+
231+
.card-tags {
232+
display: flex;
233+
flex-wrap: wrap;
234+
gap: 0.5rem;
235+
margin-top: auto;
236+
}
237+
238+
@media (min-width: 768px) {
239+
.plugin-card-container {
240+
grid-template-columns: repeat(2, 1fr);
241+
}
242+
243+
.card-image {
244+
height: 180px;
245+
}
246+
}
247+
248+
@media (min-width: 960px) {
249+
.plugin-card-container {
250+
grid-template-columns: repeat(v-bind('props.columns'), 1fr);
251+
}
252+
253+
.card-image {
254+
height: 200px;
255+
}
256+
}
257+
</style>

‎docs/.vuepress/components/SponsorHome.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
<script lang="ts" setup>
2-
import { homeSponsor, shouldShowSponsor } from "../data/sponsors";
3-
</script>
4-
51
<template>
62
<section v-if="shouldShowSponsor(homeSponsor)" id="special-spsr">
73
<span>特别赞助商</span>
@@ -17,6 +13,10 @@ import { homeSponsor, shouldShowSponsor } from "../data/sponsors";
1713
</section>
1814
</template>
1915

16+
<script lang="ts" setup>
17+
import { homeSponsor, shouldShowSponsor } from "../data/sponsors";
18+
</script>
19+
2020
<style scoped>
2121
.no-brand {
2222
animation: no-brand 2s ease-in-out infinite;

0 commit comments

Comments
 (0)