Skip to content

Commit b1e1db3

Browse files
MoonofweishengMoonofweisheng
committed
refactor: ♻️ 调整文档结构
1 parent eb514f0 commit b1e1db3

File tree

8 files changed

+243
-8
lines changed

8 files changed

+243
-8
lines changed

‎docs/.vitepress/config.mts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: weisheng
33
* @Date: 2023-07-27 10:26:09
4-
* @LastEditTime: 2024-12-07 15:20:53
4+
* @LastEditTime: 2025-02-23 15:56:46
55
* @LastEditors: weisheng
66
* @Description:
77
* @FilePath: /wot-design-uni/docs/.vitepress/config.mts

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

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script lang="ts" setup>
2+
import { ElImageViewer } from 'element-plus'
3+
import { ref } from 'vue'
4+
import { useAds } from '../composables/adsData'
5+
6+
const {data} = useAds()
7+
8+
9+
const showViewer = ref(false)
10+
const previewUrl = ref('')
11+
12+
const handleClick = (ad: any) => {
13+
if (ad.link) {
14+
window.open(ad.link, '_blank')
15+
} else if (ad.image) {
16+
previewUrl.value = ad.image
17+
showViewer.value = true
18+
}
19+
}
20+
</script>
21+
22+
<template>
23+
<div class="sidebar-ad-container" v-if="data">
24+
<slot name="sidebar-ad-content">
25+
<!-- 默认广告内容 -->
26+
<div class="sidebar-ad-list">
27+
28+
<div v-for="(ad, index) in data" :key="index" class="sidebar-ad-item">
29+
<div class="sidebar-ad-link" @click="handleClick(ad)">
30+
<img :src="ad.image" :alt="ad.title" class="sidebar-ad-img">
31+
</div>
32+
</div>
33+
</div>
34+
</slot>
35+
<el-image-viewer v-if="showViewer" :url-list="[previewUrl]" @close="showViewer = false" hide-on-click-modal
36+
teleported />
37+
</div>
38+
</template>
39+
40+
<style scoped>
41+
.sidebar-ad-container {
42+
margin: 6px 0;
43+
padding: 6px;
44+
border-radius: 6px;
45+
background-color: var(--vp-c-bg-soft);
46+
box-sizing: border-box;
47+
width: calc(100% - 6px);
48+
margin-left: 3px;
49+
margin-right: 3px;
50+
}
51+
52+
.sidebar-ad-list {
53+
display: flex;
54+
flex-direction: column;
55+
gap: 6px;
56+
}
57+
58+
.sidebar-ad-item {
59+
width: 100%;
60+
}
61+
62+
.sidebar-ad-link {
63+
display: flex;
64+
flex-direction: column;
65+
align-items: center;
66+
text-decoration: none;
67+
color: var(--vp-c-text-1);
68+
cursor: pointer;
69+
}
70+
71+
.sidebar-ad-img {
72+
width: 100%;
73+
height: auto;
74+
max-height: 120px;
75+
border-radius: 8px;
76+
object-fit: cover;
77+
transition: transform 0.3s ease;
78+
}
79+
80+
.sidebar-ad-img:hover {
81+
transform: translateY(-2px);
82+
}
83+
84+
.sidebar-ad-title {
85+
margin-top: 4px;
86+
font-size: 14px;
87+
text-align: center;
88+
}
89+
</style>

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

+9-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { useScrollLock } from '@vueuse/core'
33
import { inBrowser } from 'vitepress'
44
import { ref, watch } from 'vue'
55
import VPSidebarGroup from 'vitepress/dist/client/theme-default/components/VPSidebarGroup.vue'
6-
import { useSidebar } from 'vitepress/theme';
6+
import { useSidebar } from 'vitepress/theme'
7+
import SidebarAds from './SidebarAds.vue'
78
89
const { sidebarGroups, hasSidebar } = useSidebar()
910
@@ -58,6 +59,10 @@ watch(
5859
</span>
5960

6061
<slot name="sidebar-nav-before" />
62+
<!-- 添加广告位插槽 -->
63+
<slot name="sidebar-ad">
64+
<SidebarAds />
65+
</slot>
6166
<VPSidebarGroup :items="sidebarGroups" :key="key" />
6267
<slot name="sidebar-nav-after" />
6368
</nav>
@@ -81,6 +86,7 @@ watch(
8186
transform: translateX(-100%);
8287
transition: opacity 0.5s, transform 0.25s ease;
8388
overscroll-behavior: contain;
89+
scrollbar-gutter: stable both-edges;
8490
}
8591
8692
.VPSidebar.open {
@@ -108,8 +114,6 @@ watch(
108114
}
109115
}
110116
111-
112-
113117
@media (min-width: 960px) {
114118
.curtain {
115119
position: sticky;
@@ -127,4 +131,6 @@ watch(
127131
.nav {
128132
outline: 0;
129133
}
134+
135+
130136
</style>

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

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { ref, onMounted } from 'vue'
2+
3+
export type AdData = {
4+
image: string
5+
link?: string
6+
}
7+
8+
const data = ref<AdData[]>([{
9+
image: '/tiaojiads.png',
10+
link: '/ads/tiaojibao.html'
11+
}])
12+
13+
export function useAds() {
14+
onMounted(async () => {
15+
try {
16+
const result = await fetch('https://wot-sponsors.pages.dev/ads.json')
17+
const json = await result.json()
18+
data.value = json && json.ads ? json.ads : []
19+
} catch (error) {
20+
21+
}
22+
})
23+
24+
return {
25+
data
26+
}
27+
}
28+
29+
30+

‎docs/ads/tiaojibao.md

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
footer: false
3+
---
4+
# 调剂宝
5+
<div class="qrcode-container">
6+
<div class="qrcode-item">
7+
<h3>小程序二维码</h3>
8+
<img src="/tiaojibao.png" alt="调剂宝小程序二维码" class="qrcode-image">
9+
</div>
10+
11+
<div class="qrcode-item">
12+
<h3>福利码</h3>
13+
<div class="welfare-code">uh3p</div>
14+
<div class="welfare-desc">注册VIP会员时填写此福利码，立享20元优惠</div>
15+
</div>
16+
</div>
17+
18+
::: tip 2025考研调剂助手
19+
调剂宝整合320万+拟录取数据、90万+调剂案例，提供实时调剂提醒和智能方案推荐，助你把握每一个调剂机会！
20+
21+
[👉 了解详情](https://mp.weixin.qq.com/s/QtPNcoj7Pu_RztBvzTyWLQ)
22+
:::
23+
24+
::: warning 注意
25+
调剂系统开放时间以教育部官方通知为准，请提前做好准备
26+
:::
27+
28+
<style>
29+
.qrcode-container {
30+
display: flex;
31+
gap: 2rem;
32+
justify-content: center;
33+
margin: 1rem 0 2rem;
34+
flex-wrap: wrap;
35+
}
36+
37+
.qrcode-item {
38+
text-align: center;
39+
}
40+
41+
.qrcode-image {
42+
width: 200px;
43+
height: 200px;
44+
border-radius: 8px;
45+
margin: 1rem 0;
46+
}
47+
48+
.welfare-code {
49+
font-size: 2rem;
50+
font-weight: bold;
51+
color: var(--vp-c-brand);
52+
margin: 1rem 0;
53+
}
54+
55+
.welfare-desc {
56+
color: var(--vp-c-text-2);
57+
font-size: 0.9rem;
58+
}
59+
</style>

‎docs/public/tiaojiads.png

863 KB
Loading

‎docs/public/tiaojibao.png

49.4 KB
Loading

‎docs/reward/living.md

+55-4
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,68 @@
66

77
## 工具列表
88

9-
<el-card style="max-width: 250px" shadow="hover">
9+
<div class="tools-container">
10+
<el-card class="tool-card" shadow="hover">
1011
<template #header>
11-
<span style=" font-size:18px;font-wight:500">薪资速算器</span>
12+
<span class="tool-title">薪资速算器</span>
1213
</template>
1314
<el-image
1415
:src="salaryCalculator"
15-
style="width: 100%"
16+
class="tool-image"
1617
/>
1718
</el-card>
1819

20+
<el-card class="tool-card" shadow="hover">
21+
<template #header>
22+
<span class="tool-title">调剂宝——福利码：uh3p</span>
23+
</template>
24+
<el-image
25+
:src="tiaojiHelper"
26+
class="tool-image"
27+
/>
28+
<div class="tool-desc">
29+
2025考研调剂必备神器，助你把握每一个调剂机会！
30+
<el-link type="primary" href="/ads/tiaojibao.html" target="_blank">查看详情</el-link>
31+
</div>
32+
</el-card>
33+
</div>
34+
35+
<style>
36+
.tools-container {
37+
display: flex;
38+
flex-wrap: wrap;
39+
gap: 20px;
40+
margin: 20px 0;
41+
}
42+
43+
.tool-card {
44+
flex: 0 0 250px;
45+
transition: all 0.3s;
46+
}
47+
48+
.tool-card:hover {
49+
transform: translateY(-5px);
50+
}
51+
52+
.tool-title {
53+
font-size: 18px;
54+
font-weight: 500;
55+
}
56+
57+
.tool-image {
58+
width: 100%;
59+
border-radius: 4px;
60+
}
61+
62+
.tool-desc {
63+
margin-top: 12px;
64+
font-size: 14px;
65+
color: #666;
66+
line-height: 1.6;
67+
}
68+
</style>
69+
1970
<script setup>
2071
import salaryCalculator from '/salary-calculator.jpg'
21-
72+
import tiaojiHelper from '/tiaojibao.png'
2273
</script>

0 commit comments

Comments
 (0)