refactor: ♻️ 调整文档结构

docs/.vitepress/config.mts

@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2024-12-07 15:20:53
+ * @LastEditTime: 2025-02-23 15:56:46
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: /wot-design-uni/docs/.vitepress/config.mts

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

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { ElImageViewer } from 'element-plus'
+import { ref } from 'vue'
+import { useAds } from '../composables/adsData'
+
+const {data} = useAds()
+
+
+const showViewer = ref(false)
+const previewUrl = ref('')
+
+const handleClick = (ad: any) => {
+  if (ad.link) {
+    window.open(ad.link, '_blank')
+  } else if (ad.image) {
+    previewUrl.value = ad.image
+    showViewer.value = true
+  }
+}
+</script>
+
+<template>
+  <div class="sidebar-ad-container" v-if="data">
+    <slot name="sidebar-ad-content">
+      <!-- 默认广告内容 -->
+      <div class="sidebar-ad-list">
+
+        <div v-for="(ad, index) in data" :key="index" class="sidebar-ad-item">
+          <div class="sidebar-ad-link" @click="handleClick(ad)">
+            <img :src="ad.image" :alt="ad.title" class="sidebar-ad-img">
+          </div>
+        </div>
+      </div>
+    </slot>
+    <el-image-viewer v-if="showViewer" :url-list="[previewUrl]" @close="showViewer = false" hide-on-click-modal
+      teleported />
+  </div>
+</template>
+
+<style scoped>
+.sidebar-ad-container {
+  margin: 6px 0;
+  padding: 6px;
+  border-radius: 6px;
+  background-color: var(--vp-c-bg-soft);
+  box-sizing: border-box;
+  width: calc(100% - 6px);
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
+.sidebar-ad-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.sidebar-ad-item {
+  width: 100%;
+}
+
+.sidebar-ad-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+}
+
+.sidebar-ad-img {
+  width: 100%;
+  height: auto;
+  max-height: 120px;
+  border-radius: 8px;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.sidebar-ad-img:hover {
+  transform: translateY(-2px);
+}
+
+.sidebar-ad-title {
+  margin-top: 4px;
+  font-size: 14px;
+  text-align: center;
+}
+</style>

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

@@ -3,7 +3,8 @@ import { useScrollLock } from '@vueuse/core'
 import { inBrowser } from 'vitepress'
 import { ref, watch } from 'vue'
 import VPSidebarGroup from 'vitepress/dist/client/theme-default/components/VPSidebarGroup.vue'
-import { useSidebar } from 'vitepress/theme';
+import { useSidebar } from 'vitepress/theme'
+import SidebarAds from './SidebarAds.vue'
 
 const { sidebarGroups, hasSidebar } = useSidebar()
 
@@ -58,6 +59,10 @@ watch(
       </span>
 
       <slot name="sidebar-nav-before" />
+      <!-- 添加广告位插槽 -->
+      <slot name="sidebar-ad">
+        <SidebarAds />
+      </slot>
       <VPSidebarGroup :items="sidebarGroups" :key="key" />
       <slot name="sidebar-nav-after" />
     </nav>
@@ -81,6 +86,7 @@ watch(
   transform: translateX(-100%);
   transition: opacity 0.5s, transform 0.25s ease;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable both-edges;
 }
 
 .VPSidebar.open {
@@ -108,8 +114,6 @@ watch(
   }
 }
 
-
-
 @media (min-width: 960px) {
   .curtain {
     position: sticky;
@@ -127,4 +131,6 @@ watch(
 .nav {
   outline: 0;
 }
+
+
 </style>

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

@@ -0,0 +1,30 @@
+import { ref, onMounted } from 'vue'
+
+export type AdData = {
+  image: string
+  link?: string
+}
+
+const data = ref<AdData[]>([{
+  image: '/tiaojiads.png',
+  link: '/ads/tiaojibao.html'
+}])
+
+export function useAds() {
+  onMounted(async () => {
+   try {
+    const result = await fetch('https://wot-sponsors.pages.dev/ads.json')
+    const json = await result.json()
+    data.value = json && json.ads ? json.ads : []
+   } catch (error) {
+
+   }
+  })
+
+  return {
+    data
+  }
+}
+
+
+

docs/ads/tiaojibao.md

@@ -0,0 +1,59 @@
+---
+footer: false
+---
+# 调剂宝
+<div class="qrcode-container">
+  <div class="qrcode-item">
+    <h3>小程序二维码</h3>
+    <img src="/tiaojibao.png" alt="调剂宝小程序二维码" class="qrcode-image">
+  </div>
+
+  <div class="qrcode-item">
+    <h3>福利码</h3>
+    <div class="welfare-code">uh3p</div>
+    <div class="welfare-desc">注册VIP会员时填写此福利码，立享20元优惠</div>
+  </div>
+</div>
+
+::: tip 2025考研调剂助手
+调剂宝整合320万+拟录取数据、90万+调剂案例，提供实时调剂提醒和智能方案推荐，助你把握每一个调剂机会！
+
+[👉 了解详情](https://mp.weixin.qq.com/s/QtPNcoj7Pu_RztBvzTyWLQ)
+:::
+
+::: warning 注意
+调剂系统开放时间以教育部官方通知为准，请提前做好准备
+:::
+
+<style>
+.qrcode-container {
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  margin: 1rem 0 2rem;
+  flex-wrap: wrap;
+}
+
+.qrcode-item {
+  text-align: center;
+}
+
+.qrcode-image {
+  width: 200px;
+  height: 200px;
+  border-radius: 8px;
+  margin: 1rem 0;
+}
+
+.welfare-code {
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--vp-c-brand);
+  margin: 1rem 0;
+}
+
+.welfare-desc {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+}
+</style>

docs/reward/living.md

@@ -6,17 +6,68 @@
 
 ## 工具列表
 
-  <el-card style="max-width: 250px" shadow="hover">
+<div class="tools-container">
+  <el-card class="tool-card" shadow="hover">
     <template #header>
-    <span style=" font-size:18px;font-wight:500">薪资速算器</span>
+      <span class="tool-title">薪资速算器</span>
     </template>
     <el-image
       :src="salaryCalculator"
-      style="width: 100%"
+      class="tool-image"
     />
   </el-card>
 
+  <el-card class="tool-card" shadow="hover">
+    <template #header>
+      <span class="tool-title">调剂宝——福利码：uh3p</span>
+    </template>
+    <el-image
+      :src="tiaojiHelper"
+      class="tool-image"
+    />
+    <div class="tool-desc">
+      2025考研调剂必备神器，助你把握每一个调剂机会！
+      <el-link type="primary" href="/ads/tiaojibao.html" target="_blank">查看详情</el-link>
+    </div>
+  </el-card>
+</div>
+
+<style>
+.tools-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin: 20px 0;
+}
+
+.tool-card {
+  flex: 0 0 250px;
+  transition: all 0.3s;
+}
+
+.tool-card:hover {
+  transform: translateY(-5px);
+}
+
+.tool-title {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.tool-image {
+  width: 100%;
+  border-radius: 4px;
+}
+
+.tool-desc {
+  margin-top: 12px;
+  font-size: 14px;
+  color: #666;
+  line-height: 1.6;
+}
+</style>
+
 <script setup>
 import salaryCalculator from '/salary-calculator.jpg'
- 
+import tiaojiHelper from '/tiaojibao.png'
 </script>