mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 01:11:25 +08:00
134 lines
3.6 KiB
Vue
134 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import { ElMessageBox } from 'element-plus'
|
|
import nprogress from 'nprogress'
|
|
import dayjs from 'dayjs'
|
|
import { isClient, useStorage, useToggle } from '@vueuse/core'
|
|
import { useSidebar } from '../composables/sidebar'
|
|
import { useToggleWidgets } from '../composables/toggle-widgets'
|
|
import { useLang } from '../composables/lang'
|
|
import { breakpoints } from '../constant'
|
|
import VPOverlay from './vp-overlay.vue'
|
|
import VPNav from './vp-nav.vue'
|
|
import VPSubNav from './vp-subnav.vue'
|
|
import VPSidebar from './vp-sidebar.vue'
|
|
import VPContent from './vp-content.vue'
|
|
import VPSponsors from './vp-sponsors.vue'
|
|
|
|
const USER_PREFER_GITHUB_PAGE = 'USER_PREFER_GITHUB_PAGE'
|
|
|
|
const [isSidebarOpen, toggleSidebar] = useToggle(false)
|
|
const { hasSidebar } = useSidebar()
|
|
const lang = useLang()
|
|
|
|
useToggleWidgets(isSidebarOpen, () => {
|
|
if (!isClient) return
|
|
if (window.outerWidth >= breakpoints.lg) {
|
|
toggleSidebar(false)
|
|
}
|
|
})
|
|
|
|
const userPrefer = useStorage<boolean | string>(USER_PREFER_GITHUB_PAGE, null)
|
|
|
|
onMounted(async () => {
|
|
if (!isClient) return
|
|
window.addEventListener(
|
|
'click',
|
|
(e) => {
|
|
const link = (e.target as HTMLElement).closest('a')
|
|
if (!link) return
|
|
|
|
const { protocol, hostname, pathname, target } = link
|
|
const currentUrl = window.location
|
|
const extMatch = pathname.match(/\.\w+$/)
|
|
// only intercept inbound links
|
|
if (
|
|
!e.ctrlKey &&
|
|
!e.shiftKey &&
|
|
!e.altKey &&
|
|
!e.metaKey &&
|
|
target !== `_blank` &&
|
|
protocol === currentUrl.protocol &&
|
|
hostname === currentUrl.hostname &&
|
|
!(extMatch && extMatch[0] !== '.html')
|
|
) {
|
|
e.preventDefault()
|
|
if (pathname !== currentUrl.pathname) {
|
|
nprogress.start()
|
|
}
|
|
}
|
|
},
|
|
{ capture: true }
|
|
)
|
|
|
|
if (lang.value === 'zh-CN') {
|
|
if (location.host === 'element-plus.gitee.io') return
|
|
|
|
if (userPrefer.value) {
|
|
// no alert in the next 90 days
|
|
if (
|
|
dayjs
|
|
.unix(Number(userPrefer.value))
|
|
.add(90, 'day')
|
|
.diff(dayjs(), 'day', true) > 0
|
|
)
|
|
return
|
|
}
|
|
try {
|
|
await ElMessageBox.confirm(
|
|
'建议大陆用户访问部署在国内的站点，是否跳转？',
|
|
'提示',
|
|
{
|
|
confirmButtonText: '跳转',
|
|
cancelButtonText: '取消',
|
|
}
|
|
)
|
|
const toLang = '/zh-CN/'
|
|
location.href = `https://element-plus.gitee.io${toLang}${location.pathname.slice(
|
|
toLang.length
|
|
)}`
|
|
} catch {
|
|
userPrefer.value = String(dayjs().unix())
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="App">
|
|
<VPOverlay
|
|
class="overlay"
|
|
:show="isSidebarOpen"
|
|
@click="toggleSidebar(false)"
|
|
/>
|
|
<VPNav />
|
|
<VPSubNav v-if="hasSidebar" @open-menu="toggleSidebar(true)" />
|
|
<VPSidebar :open="isSidebarOpen" @close="toggleSidebar(false)">
|
|
<template #top>
|
|
<VPSponsors />
|
|
</template>
|
|
<template #bottom>
|
|
<slot name="sidebar-bottom" />
|
|
</template>
|
|
</VPSidebar>
|
|
<VPContent :is-sidebar-open="isSidebarOpen">
|
|
<template #content-top>
|
|
<slot name="content-top" />
|
|
</template>
|
|
<template #content-bottom>
|
|
<slot name="content-bottom" />
|
|
</template>
|
|
<template #aside-top>
|
|
<slot name="aside-top" />
|
|
</template>
|
|
<template #aside-mid>
|
|
<slot name="aside-mid" />
|
|
</template>
|
|
<template #aside-bottom>
|
|
<slot name="aside-bottom" />
|
|
</template>
|
|
</VPContent>
|
|
<Debug />
|
|
</div>
|
|
</template>
|