WuKongIM/WuKongIMDocs
1
0
Fork 0
mirror of https://github.com/WuKongIM/WuKongIMDocs synced 2025-05-30 04:47:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨美化布局组件

Browse Source
This commit is contained in:
wanglihui 2024-04-16 23:49:32 +08:00
parent 32d2e13152
commit fb561e522c
5 changed files with 153 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
.vitepress/theme/Layout.vue Normal file
View File

@ -0,0 +1,72 @@
<script setup lang="ts">
import { useData } from "vitepress";
import DefaultTheme from "vitepress/theme";
import { nextTick, provide } from "vue";
import HomePreview from "./components/HomePreview.vue";
const { isDark } = useData();
const enableTransitions = () =>
"startViewTransition" in document && window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
if (!enableTransitions()) {
isDark.value = !isDark.value;
return;
}
const clipPath = [
`circle(0px at ${x}px ${y}px)`,
`circle(${Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))}px at ${x}px ${y}px)`,
];
// @ts-expect-error
await document.startViewTransition(async () => {
isDark.value = !isDark.value;
await nextTick();
}).ready;
document.documentElement.animate(
{ clipPath: isDark.value ? clipPath.reverse() : clipPath },
{
duration: 300,
easing: "ease-in",
pseudoElement: `::view-transition-${isDark.value ? "old" : "new"}(root)`,
}
);
});
</script>
<template>
<DefaultTheme.Layout>
<template #home-features-after>
<HomePreview />
</template>
</DefaultTheme.Layout>
</template>
<style>
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-old(root),
.dark::view-transition-new(root) {
z-index: 1;
}
::view-transition-new(root),
.dark::view-transition-old(root) {
z-index: 9999;
}
.VPSwitchAppearance {
width: 22px !important;
}
.VPSwitchAppearance .check {
transform: none !important;
}
</style>

102
.vitepress/theme/components/HomePreview.vue
View File

@ -1,89 +1,89 @@
<template>
<div class="home-preview-block">
<div class="home-preview">
<h2>截图预览</h2>
<div class="items">
<div class="item">
<img data-fancybox="gallery" src="/imgs/screen1.png" />
</div>
<div class="item">
<img data-fancybox="gallery" src="/imgs/screen2.png" />
</div>
<div class="item">
<img data-fancybox="gallery" src="/imgs/screen3.png" />
</div>
<div class="item">
<img data-fancybox="gallery" src="/imgs/screen4.png" />
</div>
<div class="item">
<img data-fancybox="gallery" src="/imgs/screen5.png" />
</div>
</div>
</div>
</div>
<div class="home-preview-block">
<div class="home-preview">
<h2>截图预览</h2>
<div class="items">
<div class="item">
<img data-fancybox="gallery" src="/imgs/screen1.png" />
</div>
<div class="item">
<img data-fancybox="gallery" src="/imgs/screen2.png" />
</div>
<div class="item">
<img data-fancybox="gallery" src="/imgs/screen3.png" />
</div>
<div class="item">
<img data-fancybox="gallery" src="/imgs/screen4.png" />
</div>
<div class="item">
<img data-fancybox="gallery" src="/imgs/screen5.png" />
</div>
</div>
</div>
</div>
</template>
<style scoped>
.home-preview-block {
padding: 0 24px;
padding: 0 24px;
}
.home-preview {
max-width: 1152px;
margin: 50px auto 0;
max-width: 1152px;
margin: 50px auto 0;
}
.home-preview h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
.home-preview .items {
display: flex;
flex-wrap: wrap;
margin: -8px;
display: flex;
flex-wrap: wrap;
margin: -8px;
}
.home-preview .items .item {
width: 100%;
padding: 8px;
width: 100%;
padding: 8px;
}
.home-preview .items .item img{
.home-preview .items .item img {
width: 100%;
height: 100%;
cursor: pointer;
}
.home-preview .items .item p {
padding: 24px;
border-radius: 12px;
background-color: var(--vp-c-bg-soft);
padding: 24px;
border-radius: 12px;
background-color: var(--vp-c-bg-soft);
}
.home-preview .items .item p :deep(img) {
border: 1px solid var(--vp-c-divider);
border: 1px solid var(--vp-c-divider);
}
@media (min-width: 640px) {
.home-preview-block {
padding: 0 48px;
}
.home-preview-block {
padding: 0 48px;
}
.home-preview .items .item {
width: calc(100% / 2);
}
.home-preview .items .item {
width: calc(100% / 2);
}
}
@media (min-width: 960px) {
.home-preview-block {
padding: 0 64px;
}
.home-preview-block {
padding: 0 64px;
}
.home-preview .items .item {
width: calc(100% / 3);
}
.home-preview .items .item {
width: calc(100% / 3);
}
}
</style>

13
.vitepress/theme/index.ts
View File

@ -1,16 +1,15 @@
import { h } from "vue";
import Theme from "vitepress/theme";
import type { EnhanceAppContext } from "vitepress";
import Layout from "./Layout.vue";
import "./styles/var.css";
import "./styles/custom.css";
import 'uno.css';
import "uno.css";
import HomePreview from "./components/HomePreview.vue";
export default {
...Theme,
Layout() {
return h(Theme.Layout, null, {
"home-features-after": () => h(HomePreview),
});
},
Layout,
enhanceApp({ app }: EnhanceAppContext) {},
};

1
README.md
View File

@ -17,3 +17,4 @@ pnpm run build
``` sh
pnpm run serve
```

23
tsconfig.json Normal file
View File

@ -0,0 +1,23 @@
{
"compilerOptions": {
"rootDir": ".",
"module": "esnext",
"moduleResolution": "bundler",
"jsx": "preserve",
"resolveJsonModule": true,
"esModuleInterop": true,
"types": [
"vite/client",
"vitepress"
],
},
"include": [
".vitepress/**/*.ts",
".vitepress/**/*.vue",
"src/**/*.ts",
],
"exclude": [
"node_modules",
".vitepress/dist"
]
}