Init
This commit is contained in:
115
.vitepress/theme/components/Navbar/Dropdown-Menu.vue
Normal file
115
.vitepress/theme/components/Navbar/Dropdown-Menu.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="dropdown-menu" ref="dropdownMenu">
|
||||
<div class="menu-content">
|
||||
<div class="first-row">
|
||||
<MusicControl></MusicControl>
|
||||
<SearchButton></SearchButton>
|
||||
</div>
|
||||
<ToggleSwitch></ToggleSwitch>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import MusicControl from './Music-Control.vue'
|
||||
import SearchButton from './Search-Button.vue'
|
||||
import ToggleSwitch from './ToggleSwitch.vue'
|
||||
import { useStore } from '../../store'
|
||||
|
||||
const { state } = useStore()
|
||||
const dropdownMenu = ref<HTMLElement | null>(null)
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement
|
||||
const hamburgerEl = document.querySelector('.hamburger')
|
||||
|
||||
// 避免与展开按钮冲突
|
||||
if (hamburgerEl && hamburgerEl.contains(target)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (dropdownMenu.value && !dropdownMenu.value.contains(target) && state.showDropdownMenu) {
|
||||
state.showDropdownMenu = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.menu-content {
|
||||
position: relative;
|
||||
background-color: var(--foreground-color);
|
||||
border-radius: 2vw;
|
||||
padding: 1.2vw;
|
||||
gap: 0.8vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.first-row {
|
||||
display: flex;
|
||||
gap: 0.4vw;
|
||||
padding: 0.3vw;
|
||||
padding-bottom: 1vh;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px dashed var(--font-color-grey);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu[showmenu='true'] {
|
||||
opacity: 1;
|
||||
transform: translateY(15px);
|
||||
.menu-content {
|
||||
box-shadow: 0px 0px 8px rgb(var(--blue-shadow-color), 0.8);
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
transition: opacity 0.1s ease-in-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.dropdown-menu[showmenu='false'] {
|
||||
opacity: 0;
|
||||
transform: translateY(2px);
|
||||
.menu-content {
|
||||
box-shadow: none;
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
transition: opacity 0.2s ease-in-out, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dropdown-menu {
|
||||
.menu-content {
|
||||
border-radius: 3vh;
|
||||
padding: 2vh;
|
||||
gap: 1vh;
|
||||
}
|
||||
|
||||
.first-row {
|
||||
gap: 0.5vh;
|
||||
padding: 0.3vh;
|
||||
padding-bottom: 1vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
.vitepress/theme/components/Navbar/Music-Control.vue
Normal file
51
.vitepress/theme/components/Navbar/Music-Control.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<span class="music-control" @click="toggleMusic">
|
||||
<i :class="isPlaying ? 'iconfont icon-continue continue' : 'iconfont icon-stop stop'"></i>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const isPlaying = ref(false) // 音乐播放状态
|
||||
const music = ref<HTMLAudioElement | null>(null)
|
||||
|
||||
const toggleMusic = () => {
|
||||
if (music.value) {
|
||||
if (isPlaying.value) {
|
||||
music.value.pause()
|
||||
} else {
|
||||
music.value.play().catch((err) => console.log('播放失败: ', err))
|
||||
}
|
||||
isPlaying.value = !isPlaying.value
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
music.value = document.getElementById('background-music') as HTMLAudioElement
|
||||
if (music.value) {
|
||||
music.value.volume = 0.3 // 设置音量为30%
|
||||
music.value.pause() // 初始状态为暂停
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.iconfont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2vw;
|
||||
color: var(--font-color-grey);
|
||||
cursor: pointer;
|
||||
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.iconfont {
|
||||
font-size: 4vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
32
.vitepress/theme/components/Navbar/Search-Button.vue
Normal file
32
.vitepress/theme/components/Navbar/Search-Button.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<span class="iconfont icon-search search" @click="showDialog"></span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStore } from '../../store'
|
||||
const { state } = useStore()
|
||||
|
||||
const showDialog = () => {
|
||||
state.searchDialog = true
|
||||
state.showDropdownMenu = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.search {
|
||||
cursor: pointer;
|
||||
font-size: 2vw;
|
||||
color: var(--font-color-grey);
|
||||
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search {
|
||||
font-size: 4vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
292
.vitepress/theme/components/Navbar/Search-Dialog.vue
Normal file
292
.vitepress/theme/components/Navbar/Search-Dialog.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div class="search-dialog">
|
||||
<div class="dialog-cover" @click="closeDialog"></div>
|
||||
<div class="dialog-content">
|
||||
<button type="button" class="close-btn" @click="closeDialog">×</button>
|
||||
<span class="title">搜索</span>
|
||||
<input
|
||||
type="text"
|
||||
name=""
|
||||
id="search-input"
|
||||
placeholder="请输入关键字"
|
||||
v-model="searchStr"
|
||||
@input="search"
|
||||
/>
|
||||
<ul class="search-list">
|
||||
<span>{{ status }}</span>
|
||||
<li v-for="res in resultList" @click="closeDialog">
|
||||
<a :href="base + res.href">{{ res.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const emit = defineEmits(['closeDialog'])
|
||||
const closeDialog = (): void => {
|
||||
// 添加关闭动画
|
||||
const dialog = document.querySelector('.search-dialog') as HTMLElement
|
||||
if (dialog) {
|
||||
dialog.classList.add('hide-dialog')
|
||||
setTimeout(() => {
|
||||
emit('closeDialog')
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
|
||||
import { data as posts } from '../../utils/posts.data'
|
||||
import MiniSearch, { SearchResult } from 'minisearch'
|
||||
import { useData } from 'vitepress'
|
||||
|
||||
const base = useData().site.value.base
|
||||
const miniSearch = new MiniSearch({
|
||||
fields: ['title', 'content'],
|
||||
storeFields: ['title', 'href'],
|
||||
searchOptions: {
|
||||
fuzzy: 0.3,
|
||||
},
|
||||
})
|
||||
miniSearch.addAll(posts)
|
||||
|
||||
const searchStr = defineModel<string>()
|
||||
const resultList = ref<SearchResult[]>([])
|
||||
const status = ref('这里空空的')
|
||||
let timerId: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
function search(): void {
|
||||
status.value = '搜索中……'
|
||||
if (timerId) {
|
||||
clearTimeout(timerId)
|
||||
}
|
||||
timerId = setTimeout(() => {
|
||||
resultList.value = miniSearch.search(searchStr.value || '').slice(0, 5)
|
||||
if (resultList.value.length) {
|
||||
status.value = '搜到了~'
|
||||
} else {
|
||||
status.value = '这里空空的'
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const dialog = document.querySelector('.search-dialog') as HTMLElement
|
||||
if (dialog) {
|
||||
dialog.classList.add('show-dialog')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.search-dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
animation: fadein 0.2s forwards;
|
||||
}
|
||||
// 遮罩
|
||||
.dialog-cover {
|
||||
background: rgba(0, 0, 0, 0.614);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
animation: cover-fadein 0.2s forwards;
|
||||
}
|
||||
// 搜索框
|
||||
.dialog-content {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 768px;
|
||||
height: auto;
|
||||
background-color: var(--search-dialog-bg);
|
||||
border-radius: 16px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transform: scale(0.9);
|
||||
opacity: 0;
|
||||
animation: pop-up 0.2s forwards;
|
||||
}
|
||||
|
||||
.dialog-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 56px;
|
||||
border-bottom: 3px solid var(--search-dialog-border);
|
||||
background-color: var(--search-dialog-header-bg);
|
||||
background-image: var(--deco2);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
padding: 5px 0;
|
||||
border-bottom: 5px solid var(--font-color-gold);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
font-size: 36px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
color: var(--font-color-grey);
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin: 10px;
|
||||
padding: 0 16px;
|
||||
background-color: var(--search-input-bg);
|
||||
border: 3px solid var(--search-input-border);
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
outline: 3px solid var(--search-input-border);
|
||||
}
|
||||
}
|
||||
|
||||
.search-list {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--search-list-bg);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
background-color: var(--search-item-bg);
|
||||
border-radius: 5px;
|
||||
box-shadow: 3px 3px 3px var(--search-item-shadow);
|
||||
padding: 10px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
a {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
color: var(--font-color-grey);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dialog-content {
|
||||
top: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
// 动画
|
||||
@keyframes fadein {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cover-fadein {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pop-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cover-fadeout {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.show-dialog {
|
||||
animation: fadein 0.3s forwards;
|
||||
}
|
||||
|
||||
.hide-dialog {
|
||||
animation: fadeout 0.3s forwards;
|
||||
}
|
||||
|
||||
.dialog-cover.show-dialog {
|
||||
animation: cover-fadein 0.3s forwards;
|
||||
}
|
||||
|
||||
.dialog-cover.hide-dialog {
|
||||
animation: cover-fadeout 0.3s forwards;
|
||||
}
|
||||
|
||||
.dialog-content.show-dialog {
|
||||
animation: pop-up 0.3s forwards;
|
||||
}
|
||||
|
||||
.dialog-content.hide-dialog {
|
||||
animation: pop-down 0.3s forwards;
|
||||
}
|
||||
|
||||
@keyframes pop-down {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
230
.vitepress/theme/components/Navbar/ToggleSwitch.vue
Normal file
230
.vitepress/theme/components/Navbar/ToggleSwitch.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="toggle-container">
|
||||
<div class="theme-select">
|
||||
<span class="label">主题</span>
|
||||
<div class="select-wrapper">
|
||||
<select v-model="selectedTheme" @change="changeTheme">
|
||||
<option value="light">Arona</option>
|
||||
<option value="dark">Plana</option>
|
||||
<option value="system">System</option>
|
||||
</select>
|
||||
<span class="select-arrow">▼</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(label, id) in toggles"
|
||||
:key="id"
|
||||
class="toggle-item">
|
||||
<span class="label">{{ label }}</span>
|
||||
<input type="checkbox"
|
||||
:id="id"
|
||||
:checked="state[id]"
|
||||
@change="toggleSwitch(id)">
|
||||
<label :for="id" class="toggleSwitch"></label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStore } from '../../store'
|
||||
import { onMounted, ref } from 'vue'
|
||||
const { state } = useStore()
|
||||
|
||||
const selectedTheme = ref('system')
|
||||
|
||||
const toggles = {
|
||||
fireworksEnabled: '烟花',
|
||||
SpinePlayerEnabled: 'Spine',
|
||||
}
|
||||
|
||||
let darkModeMediaQuery: MediaQueryList
|
||||
let handleSystemThemeChange: (e: MediaQueryListEvent | MediaQueryList) => void
|
||||
|
||||
// 页面加载时从 localStorage 读取状态
|
||||
onMounted(() => {
|
||||
// 读取主题设置,如果没有存储值则默认使用system
|
||||
const storedTheme = localStorage.getItem('darkMode')
|
||||
selectedTheme.value = storedTheme || 'system'
|
||||
|
||||
// 定义系统主题变化处理函数
|
||||
darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
|
||||
handleSystemThemeChange = (e: MediaQueryListEvent | MediaQueryList) => {
|
||||
if (selectedTheme.value === 'system') {
|
||||
const theme = e.matches ? 'dark' : 'light'
|
||||
document.documentElement.setAttribute('theme', theme)
|
||||
state.darkMode = theme
|
||||
}
|
||||
}
|
||||
|
||||
// 如果是system模式,启动监听
|
||||
if (selectedTheme.value === 'system') {
|
||||
handleSystemThemeChange(darkModeMediaQuery)
|
||||
darkModeMediaQuery.addEventListener('change', handleSystemThemeChange)
|
||||
}
|
||||
|
||||
applyTheme(selectedTheme.value)
|
||||
|
||||
// 读取其他开关状态
|
||||
Object.keys(toggles).forEach((key) => {
|
||||
const storedValue = localStorage.getItem(key);
|
||||
if (storedValue !== null) {
|
||||
state[key] = JSON.parse(storedValue);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const changeTheme = () => {
|
||||
state.darkMode = selectedTheme.value as 'system' | 'dark' | 'light';
|
||||
localStorage.setItem('darkMode', selectedTheme.value);
|
||||
|
||||
// 根据选择决定是否启用系统主题监听
|
||||
if (selectedTheme.value === 'system') {
|
||||
handleSystemThemeChange(darkModeMediaQuery)
|
||||
darkModeMediaQuery.addEventListener('change', handleSystemThemeChange)
|
||||
} else {
|
||||
darkModeMediaQuery.removeEventListener('change', handleSystemThemeChange)
|
||||
}
|
||||
|
||||
applyTheme(selectedTheme.value);
|
||||
};
|
||||
|
||||
const toggleSwitch = (key: string) => {
|
||||
const isChecked = state[key];
|
||||
state[key] = !isChecked;
|
||||
localStorage.setItem(key, JSON.stringify(!isChecked));
|
||||
};
|
||||
|
||||
const applyTheme = (theme: string) => {
|
||||
let effectiveTheme = theme
|
||||
if (theme === 'system') {
|
||||
effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
document.documentElement.setAttribute('theme', effectiveTheme)
|
||||
state.darkMode = effectiveTheme as 'light' | 'dark' | 'system'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.toggle-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toggle-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: rgba(var(--blue-shadow-color), 0.05);
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(var(--blue-shadow-color), 0.06);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 15px;
|
||||
color: var(--font-color-grey);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggleSwitch {
|
||||
position: relative;
|
||||
width: 46px;
|
||||
height: 24px;
|
||||
background: rgba(82, 82, 82, 0.3);
|
||||
border-radius: 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s ease;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: var(--foreground-color);
|
||||
border-radius: 50%;
|
||||
transition: all 0.4s cubic-bezier(0.3, 1.5, 0.7, 1);
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .toggleSwitch {
|
||||
background: rgb(66, 92, 139);
|
||||
|
||||
&::after {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
}
|
||||
|
||||
.cooling {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
background: rgba(var(--blue-shadow-color), 0.05);
|
||||
border-radius: 12px;
|
||||
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
.select-arrow {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--font-color-grey);
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 6px 28px 6px 10px;
|
||||
font-size: 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(var(--blue-shadow-color), 0.15);
|
||||
background: var(--foreground-color);
|
||||
color: var(--font-color-grey);
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(var(--blue-shadow-color), 0.3);
|
||||
background: rgba(var(--blue-shadow-color), 0.03);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: rgba(var(--blue-shadow-color), 0.4);
|
||||
box-shadow: 0 0 0 2px rgba(var(--blue-shadow-color), 0.1);
|
||||
}
|
||||
|
||||
option {
|
||||
padding: 8px;
|
||||
background: var(--foreground-color);
|
||||
|
||||
&:hover {
|
||||
background: rgba(var(--blue-shadow-color), 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
191
.vitepress/theme/components/Navbar/index.vue
Normal file
191
.vitepress/theme/components/Navbar/index.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<header :class="{ postViewer: state.currPost.href }" class="container">
|
||||
<nav>
|
||||
<span class="logo">
|
||||
<img @dragstart.prevent src="../../assets/icon/navLogo.svg" alt="" />
|
||||
</span>
|
||||
<span class="menu">
|
||||
<ul>
|
||||
<li v-for="item in menuList">
|
||||
<a :href="base + item.url" @click="handleNavClick(item.url)">{{ item.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
<div
|
||||
class="hamburger"
|
||||
:class="{ active: state.showDropdownMenu }"
|
||||
@click="toggleDropdownMenu"
|
||||
>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<DropdownMenu :showMenu="state.showDropdownMenu"></DropdownMenu>
|
||||
</nav>
|
||||
</header>
|
||||
<SearchDialog v-if="state.searchDialog" @close-dialog="closeDialog"></SearchDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useData } from 'vitepress'
|
||||
|
||||
const base = useData().site.value.base
|
||||
const themeConfig = useData().theme.value
|
||||
const menuList = themeConfig.menuList
|
||||
|
||||
import { useStore } from '../../store'
|
||||
const { state } = useStore()
|
||||
|
||||
import SearchDialog from './Search-Dialog.vue'
|
||||
import DropdownMenu from './Dropdown-Menu.vue'
|
||||
|
||||
const closeDialog = () => {
|
||||
state.searchDialog = false
|
||||
}
|
||||
const toggleDropdownMenu = () => {
|
||||
state.showDropdownMenu = !state.showDropdownMenu
|
||||
}
|
||||
const resetPage = () => {
|
||||
state.currPage = 1
|
||||
}
|
||||
|
||||
const handleNavClick = (url: string) => {
|
||||
// 点击首页时重置页码
|
||||
if (url === '') {
|
||||
resetPage()
|
||||
}
|
||||
|
||||
// 点击标签时重置标签和页码
|
||||
if (url === 'tags/') {
|
||||
resetPage()
|
||||
state.currTag = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.postViewer {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 75vh;
|
||||
position: relative;
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 72px;
|
||||
z-index: 100;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
border-radius: 0 0 32px 32px;
|
||||
border-bottom: solid 2px var(--foreground-color);
|
||||
border-left: solid 2px var(--foreground-color);
|
||||
border-right: solid 2px var(--foreground-color);
|
||||
background: linear-gradient(0.25turn, transparent, var(--foreground-color) 25%),
|
||||
var(--triangle-background);
|
||||
backdrop-filter: var(--blur-val);
|
||||
box-shadow: 0px 0px 8px rgb(var(--blue-shadow-color), 0.8);
|
||||
}
|
||||
|
||||
.logo {
|
||||
img {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
filter: drop-shadow(0 0 8px #328cfa);
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin: 0 64px;
|
||||
a {
|
||||
display: block;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--font-color-grey);
|
||||
transition: all 0.5s;
|
||||
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
|
||||
&:hover {
|
||||
color: var(--font-color-gold);
|
||||
background-color: var(--btn-background);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger .line {
|
||||
display: block;
|
||||
width: 80%;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--font-color-grey);
|
||||
margin-bottom: 4px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.hamburger.active .line:nth-child(1) {
|
||||
transform: translateY(8px) rotate(45deg);
|
||||
}
|
||||
.hamburger.active .line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger.active .line:nth-child(3) {
|
||||
transform: translateY(-8px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header {
|
||||
nav {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
img {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
ul {
|
||||
li {
|
||||
margin: 0 10px;
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user