Skip to content

Commit 3564bce

Browse files
MoonofweishengMoonofweisheng
committed
docs: ✏️ 添加赞助渠道
1 parent d7272eb commit 3564bce

13 files changed

Lines changed: 321 additions & 23 deletions

File tree

‎docs/.vitepress/locales/en-US.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,11 @@ export default defineConfig({
139139
{
140140
text: 'Donor List',
141141
link: '/en-US/reward/donor',
142+
},
143+
// 赞助渠道
144+
{
145+
text: 'Sponsor',
146+
link: '/reward/sponsor',
142147
}
143148
],
144149
'/en-US/component/': [

‎docs/.vitepress/locales/zh-CN.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,11 @@ export default defineConfig({
147147
{
148148
text: '榜上有名',
149149
link: '/reward/donor',
150-
}
150+
},
151+
{
152+
text: '成为赞助者',
153+
link: '/reward/sponsor',
154+
},
151155
],
152156
'/component/': [
153157
{

‎docs/.vitepress/theme/components/AsideSponsors.vue‎

Lines changed: 88 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,97 @@
1+
<!--
2+
* @Author: weisheng
3+
* @Date: 2025-09-21 17:13:45
4+
* @LastEditTime: 2025-09-21 19:08:34
5+
* @LastEditors: weisheng
6+
* @Description:
7+
* @FilePath: /wot-design-uni/docs/.vitepress/theme/components/AsideSponsors.vue
8+
* 记得注释
9+
-->
110
<script setup lang="ts">
211
import { computed } from 'vue'
3-
import { VPDocAsideSponsors } from 'vitepress/theme'
4-
import { useSponsor } from '../composables/sponsor'
12+
import { useAdSponsor } from '../composables/adSponsor'
513
6-
const { data } = useSponsor()
14+
const { data } = useAdSponsor()
715
8-
const sponsors = computed(() => {
9-
return (
10-
data?.value.map((sponsor) => {
11-
return {
12-
size: sponsor.size === 'big' ? 'mini' : 'xmini',
13-
items: sponsor.items,
14-
}
15-
}) ?? []
16-
)
16+
// 分离超级赞助和金牌赞助
17+
const superSponsors = computed(() => {
18+
return data.value?.find(sponsor => sponsor.tier === 'Platinum')
19+
})
20+
21+
const goldSponsors = computed(() => {
22+
return data.value?.find(sponsor => sponsor.tier === 'Gold')
23+
})
24+
25+
// 判断金牌赞助数量是否为奇数
26+
const isGoldSponsorsOdd = computed(() => {
27+
return (goldSponsors.value?.items?.length||0) % 2 === 1
1728
})
1829
</script>
1930

2031
<template>
21-
<VPDocAsideSponsors v-if="data" :data="sponsors" />
32+
<div class="VPDocAsideSponsors">
33+
<div class="VPSponsors vp-sponsor aside">
34+
<!-- 超级赞助：一行一个 -->
35+
<section class="vp-sponsor-section" v-if="superSponsors?.items.length">
36+
<div class="VPSponsorsGrid vp-sponsor-grid mini" data-vp-grid="1">
37+
<div class="vp-sponsor-grid-item" v-for="sponsor in superSponsors.items" :key="sponsor.name">
38+
<a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener">
39+
<article class="vp-sponsor-grid-box">
40+
<h4 class="visually-hidden">{{ sponsor.url }}</h4>
41+
<img v-if="sponsor.img" class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name">
42+
<span v-else class="vp-sponsor-grid-text">{{ sponsor.name }}</span>
43+
</article>
44+
</a>
45+
</div>
46+
</div>
47+
</section>
48+
49+
<!-- 金牌赞助：一行两个 -->
50+
<section class="vp-sponsor-section" v-if="goldSponsors?.items.length">
51+
<div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="2">
52+
<div class="vp-sponsor-grid-item" v-for="sponsor in goldSponsors.items" :key="sponsor.name">
53+
<a class="vp-sponsor-grid-link" :href="sponsor.url" target="_blank" rel="sponsored noopener">
54+
<article class="vp-sponsor-grid-box">
55+
<h4 class="visually-hidden">{{ sponsor.name }}</h4>
56+
<img v-if="sponsor.img" class="vp-sponsor-grid-image" :src="sponsor.img" :alt="sponsor.name">
57+
<span v-else class="vp-sponsor-grid-text">{{ sponsor.name }}</span>
58+
</article>
59+
</a>
60+
</div>
61+
<!-- 当金牌赞助为奇数时，默认赞助位填补到金牌赞助位置 -->
62+
<div class="vp-sponsor-grid-item" v-if="isGoldSponsorsOdd">
63+
<a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener">
64+
<article class="vp-sponsor-grid-box">
65+
<span class="vp-sponsor-grid-text">成为赞助商</span>
66+
</article>
67+
</a>
68+
</div>
69+
</div>
70+
</section>
71+
72+
<!-- 当金牌赞助为偶数或没有金牌赞助时，默认赞助位占据一整行 -->
73+
<section class="vp-sponsor-section" v-if="!isGoldSponsorsOdd || !goldSponsors?.items.length">
74+
<div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="1">
75+
<div class="vp-sponsor-grid-item">
76+
<a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener">
77+
<article class="vp-sponsor-grid-box">
78+
<span class="vp-sponsor-grid-text">成为赞助商</span>
79+
</article>
80+
</a>
81+
</div>
82+
</div>
83+
</section>
84+
</div>
85+
</div>
2286
</template>
87+
88+
<style>
89+
.vp-sponsor-grid-text {
90+
color: var(--vp-c-text-2);
91+
font-size: 12px;
92+
}
93+
94+
.dark .vp-sponsor-grid-text {
95+
color: var(--vp-c-gray-1);
96+
}
97+
</style>

‎docs/.vitepress/theme/components/SpecialSponsor.vue‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
import { useAdSponsor } from '../composables/adSponsor'
4+
5+
interface Props {
6+
title?: string
7+
}
8+
9+
withDefaults(defineProps<Props>(), {
10+
title: '超级赞助',
11+
})
12+
13+
const { data } = useAdSponsor()
14+
15+
// 获取第一个铂金赞助商
16+
const platinumSponsor = computed(() => {
17+
const platinum = data.value?.find(sponsor => sponsor.tier === 'Platinum')
18+
return platinum?.items?.[0] || null
19+
})
20+
</script>
21+
22+
<template>
23+
<section v-if="platinumSponsor" class="special-sponsor">
24+
<h3>{{ title }}</h3>
25+
<div class="special-sponsor-container">
26+
<a class="logo" :href="platinumSponsor.url" target="_blank" rel="sponsored noopener">
27+
<picture >
28+
<img :src="platinumSponsor.img" :alt="platinumSponsor.name" style="height: 72px;" />
29+
</picture>
30+
31+
</a>
32+
<span>{{ platinumSponsor.name }}</span>
33+
</div>
34+
</section>
35+
</template>
36+
37+
<style scoped>
38+
.special-sponsor {
39+
border-top: 1px solid var(--vp-c-gray-soft);
40+
border-bottom: 1px solid var(--vp-c-gray-soft);
41+
padding: 12px 24px;
42+
display: flex;
43+
justify-content: center;
44+
align-items: center;
45+
margin-bottom: 64px;
46+
}
47+
48+
.special-sponsor h3 {
49+
text-align: center;
50+
font-size: 13px;
51+
font-weight: 500;
52+
}
53+
54+
.special-sponsor-container {
55+
display: flex;
56+
justify-content: center;
57+
align-items: center;
58+
}
59+
60+
.special-sponsor .logo {
61+
display: flex;
62+
justify-content: center;
63+
padding: 0 20px;
64+
}
65+
66+
.special-sponsor span {
67+
color: var(--vp-c-text-2);
68+
font-weight: 500;
69+
font-size: 13px;
70+
vertical-align: middle;
71+
flex: 1;
72+
}
73+
74+
.special-sponsor a {
75+
display: flex;
76+
justify-content: center;
77+
padding: 0 24px;
78+
}
79+
80+
.special-sponsor-empty {
81+
border-top: 1px solid var(--vp-c-gray-soft);
82+
border-bottom: 1px solid var(--vp-c-gray-soft);
83+
padding: 12px 24px;
84+
display: flex;
85+
justify-content: center;
86+
align-items: center;
87+
margin-bottom: 64px;
88+
}
89+
90+
.special-sponsor-empty span:first-child {
91+
text-align: right;
92+
}
93+
94+
.special-sponsor-empty img {
95+
height: 42px;
96+
margin: -6px 0;
97+
}
98+
99+
.dark .special-sponsor-empty img {
100+
filter: grayscale(1) invert(1);
101+
}
102+
103+
@media (max-width: 576px) {
104+
.special-sponsor-empty {
105+
flex-direction: column;
106+
height: auto;
107+
}
108+
.special-sponsor-empty img {
109+
height: 36px;
110+
margin: 8px 0;
111+
}
112+
.special-sponsor-empty span {
113+
text-align: center !important;
114+
}
115+
}
116+
</style>

‎docs/.vitepress/theme/composables/adSponsor.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { ref, onMounted } from 'vue'
2+
import axios from 'axios'
3+
4+
export type GridSize = 'xmini' | 'mini' | 'small' | 'medium' | 'big'
5+
6+
export interface Sponsor {
7+
name: string
8+
img: string
9+
url: string
10+
}
11+
export interface Sponsors {
12+
tier?: string
13+
size?: GridSize
14+
items: Sponsor[]
15+
}
16+
17+
18+
const data = ref<Sponsors[]>([])
19+
20+
export function useAdSponsor() {
21+
onMounted(async () => {
22+
// 定义数据源URL列表，按优先级排序
23+
const urls = [
24+
'https://sponsor.wot-ui.cn/sponsor.json',
25+
'https://wot-sponsors.pages.dev/sponsor.json'
26+
]
27+
28+
// 尝试从多个数据源获取数据
29+
const fetchData = async () => {
30+
for (const url of urls) {
31+
try {
32+
const response = await axios.get(url, {
33+
timeout: 5000 // 设置5秒超时
34+
})
35+
return response?.data?.data // 成功获取数据后直接返回
36+
} catch (error) {
37+
console.warn(`Failed to fetch from ${url}`)
38+
// 继续尝试下一个URL
39+
}
40+
}
41+
return [] // 所有数据源都失败时返回null
42+
}
43+
44+
data.value = await fetchData()
45+
})
46+
47+
return {
48+
data,
49+
}
50+
}
51+
52+
53+

‎docs/.vitepress/theme/composables/adsData.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export function useAds() {
1313
onMounted(async () => {
1414
// 定义数据源URL列表，按优先级排序
1515
const urls = [
16-
'https://sponsor.wot-design-uni.cn/ads.json',
16+
'https://sponsor.wot-ui.cn/ads.json',
1717
'https://wot-sponsors.pages.dev/ads.json'
1818
]
1919

‎docs/.vitepress/theme/composables/cases.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
/*
2+
* @Author: weisheng
3+
* @Date: 2025-08-30 13:06:10
4+
* @LastEditTime: 2025-09-21 15:07:39
5+
* @LastEditors: weisheng
6+
* @Description:
7+
* @FilePath: /wot-design-uni/docs/.vitepress/theme/composables/cases.ts
8+
* 记得注释
9+
*/
110
import { ref, onMounted } from 'vue'
211
import axios from 'axios'
312

@@ -13,7 +22,7 @@ export function useCaseData() {
1322
onMounted(async () => {
1423
// 定义数据源URL列表，按优先级排序
1524
const urls = [
16-
'https://sponsor.wot-design-uni.cn',
25+
'https://sponsor.wot-ui.cn',
1726
'https://wot-sponsors.pages.dev'
1827
]
1928

‎docs/.vitepress/theme/composables/friendly.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function useFriendly() {
1818

1919
// 定义数据源URL列表，按优先级排序
2020
const urls = [
21-
'https://sponsor.wot-design-uni.cn/friendly.json',
21+
'https://sponsor.wot-ui.cn/friendly.json',
2222
'https://wot-sponsors.pages.dev/friendly.json'
2323
]
2424

‎docs/.vitepress/theme/composables/sponsor.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/*
22
* @Author: weisheng
3-
* @Date: 2023-08-01 11:12:05
4-
* @LastEditTime: 2025-05-07 23:07:17
3+
* @Date: 2025-09-21 15:01:29
4+
* @LastEditTime: 2025-09-21 18:00:09
55
* @LastEditors: weisheng
6-
* @Description:
6+
* @Description:
77
* @FilePath: /wot-design-uni/docs/.vitepress/theme/composables/sponsor.ts
88
* 记得注释
99
*/
@@ -21,7 +21,7 @@ export function useSponsor() {
2121

2222
// 定义数据源URL列表，按优先级排序
2323
const urls = [
24-
'https://sponsor.wot-design-uni.cn/wot-design-uni.json',
24+
'https://sponsor.wot-ui.cn/wot-design-uni.json',
2525
'https://wot-sponsors.pages.dev/wot-design-uni.json'
2626
]
2727

0 commit comments

Comments
 (0)