2019-09-17 19:28:28 +08:00
|
|
|
<template>
|
2020-12-12 13:51:22 +08:00
|
|
|
<n-layout-header bordered>
|
2020-03-03 19:25:25 +08:00
|
|
|
<div class="nav">
|
2020-12-12 13:51:22 +08:00
|
|
|
<n-text tag="div" class="ui-logo" :depth="1" @click="handleLogoClick">
|
2021-02-14 00:52:22 +08:00
|
|
|
<img src="./assets/images/naivelogo.svg" />
|
2020-11-28 14:33:04 +08:00
|
|
|
Naive UI
|
2020-11-14 20:38:30 +08:00
|
|
|
</n-text>
|
2020-12-12 13:51:22 +08:00
|
|
|
<div style="display: flex; align-items: center">
|
2020-11-20 15:14:02 +08:00
|
|
|
<div class="nav-menu">
|
|
|
|
<n-menu
|
|
|
|
mode="horizontal"
|
|
|
|
:value="menuValue"
|
|
|
|
:items="menuItems"
|
2021-02-14 00:52:22 +08:00
|
|
|
@update:value="handleMenuSelect"
|
2020-11-20 15:14:02 +08:00
|
|
|
/>
|
|
|
|
</div>
|
2020-03-03 19:25:25 +08:00
|
|
|
<n-auto-complete
|
2020-09-30 14:56:45 +08:00
|
|
|
v-model:value="searchInputValue"
|
2020-12-12 13:51:22 +08:00
|
|
|
style="width: 216px; margin-left: 24px"
|
2020-10-07 20:45:51 +08:00
|
|
|
:placeholder="t('searchPlaceholder')"
|
2020-03-03 19:25:25 +08:00
|
|
|
:options="searchOptions"
|
|
|
|
clear-after-select
|
|
|
|
blur-after-select
|
|
|
|
@select="handleSelect"
|
|
|
|
/>
|
|
|
|
</div>
|
2020-12-12 13:51:22 +08:00
|
|
|
<div style="display: flex">
|
2020-11-23 02:22:41 +08:00
|
|
|
<n-button size="small" class="nav-picker" @click="handleThemeChange">
|
2020-09-08 22:04:45 +08:00
|
|
|
{{ themeOptions[theme].label }}
|
2020-11-23 02:22:41 +08:00
|
|
|
</n-button>
|
|
|
|
<n-button size="small" class="nav-picker" @click="handleLanguageChange">
|
2020-03-03 19:25:25 +08:00
|
|
|
{{ langOptions[lang].label }}
|
2020-11-23 02:22:41 +08:00
|
|
|
</n-button>
|
|
|
|
<n-button
|
2020-10-30 17:42:34 +08:00
|
|
|
v-if="dev"
|
2020-11-23 02:22:41 +08:00
|
|
|
size="small"
|
2020-03-05 09:57:29 +08:00
|
|
|
class="nav-picker"
|
2020-09-27 13:53:16 +08:00
|
|
|
@click="handleModeChange"
|
2020-03-05 09:57:29 +08:00
|
|
|
>
|
2020-09-27 22:27:25 +08:00
|
|
|
{{ modeOptions[displayMode].label }}
|
2020-11-23 02:22:41 +08:00
|
|
|
</n-button>
|
2020-11-28 14:33:04 +08:00
|
|
|
<n-button size="small">
|
|
|
|
{{ version }}
|
|
|
|
</n-button>
|
2020-02-27 18:09:23 +08:00
|
|
|
</div>
|
2019-11-22 18:49:53 +08:00
|
|
|
</div>
|
2020-03-03 19:25:25 +08:00
|
|
|
</n-layout-header>
|
2019-09-17 19:28:28 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-10-07 20:45:51 +08:00
|
|
|
import { computed, readonly, ref } from 'vue'
|
2020-07-22 17:40:38 +08:00
|
|
|
import version from '../src/version'
|
2021-01-13 12:31:41 +08:00
|
|
|
import { i18n } from './utils/composables'
|
2020-12-12 13:51:22 +08:00
|
|
|
import {
|
2021-01-13 12:01:02 +08:00
|
|
|
useThemeName,
|
|
|
|
useLocaleName,
|
|
|
|
useDisplayMode,
|
|
|
|
useFlattenedDocOptions
|
|
|
|
} from './store'
|
2019-09-17 19:28:28 +08:00
|
|
|
|
2020-02-26 17:21:03 +08:00
|
|
|
function match (pattern, string) {
|
|
|
|
if (!pattern.length) return true
|
|
|
|
if (!string.length) return false
|
|
|
|
if (pattern[0] === string[0]) return match(pattern.slice(1), string.slice(1))
|
|
|
|
return match(pattern, string.slice(1))
|
|
|
|
}
|
|
|
|
|
2019-09-17 19:28:28 +08:00
|
|
|
export default {
|
2020-09-27 22:27:25 +08:00
|
|
|
name: 'SiteHeader',
|
|
|
|
inject: ['message'],
|
|
|
|
setup () {
|
2020-10-07 20:45:51 +08:00
|
|
|
const { t } = i18n({
|
|
|
|
'zh-CN': {
|
2020-11-03 15:10:29 +08:00
|
|
|
dark: '深色',
|
|
|
|
light: '浅色',
|
|
|
|
searchPlaceholder: '搜索',
|
|
|
|
home: '首页',
|
|
|
|
doc: '文档',
|
2021-02-14 14:52:14 +08:00
|
|
|
component: '组件',
|
2020-11-03 15:10:29 +08:00
|
|
|
common: '常规',
|
|
|
|
debug: '调试',
|
|
|
|
alreadyHome: '别点了,你已经在首页了'
|
2020-10-07 20:45:51 +08:00
|
|
|
},
|
|
|
|
'en-US': {
|
2020-11-03 15:10:29 +08:00
|
|
|
dark: 'Dark',
|
|
|
|
light: 'Light',
|
|
|
|
searchPlaceholder: 'Search',
|
|
|
|
home: 'Home',
|
|
|
|
doc: 'Documentation',
|
2021-02-14 14:52:14 +08:00
|
|
|
component: 'Component',
|
2020-11-03 15:10:29 +08:00
|
|
|
common: 'Common',
|
|
|
|
debug: 'Debug',
|
|
|
|
alreadyHome: "You've already been in home page. No clicking."
|
2020-10-07 20:45:51 +08:00
|
|
|
}
|
|
|
|
})
|
|
|
|
const menuItemsRef = computed(() => {
|
|
|
|
return [
|
|
|
|
{
|
2021-02-14 14:52:14 +08:00
|
|
|
key: 'home',
|
2020-10-07 20:45:51 +08:00
|
|
|
title: t('home')
|
|
|
|
},
|
|
|
|
{
|
2021-02-14 14:52:14 +08:00
|
|
|
key: 'doc',
|
2020-10-07 20:45:51 +08:00
|
|
|
title: t('doc')
|
2021-02-14 14:52:14 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'component',
|
|
|
|
title: t('component')
|
2020-10-07 20:45:51 +08:00
|
|
|
}
|
|
|
|
]
|
|
|
|
})
|
|
|
|
const themeOptionsRef = computed(() => ({
|
|
|
|
dark: {
|
|
|
|
label: t('light'),
|
|
|
|
next: 'light'
|
|
|
|
},
|
|
|
|
light: {
|
|
|
|
label: t('dark'),
|
|
|
|
next: 'dark'
|
|
|
|
}
|
|
|
|
}))
|
2020-09-27 22:27:25 +08:00
|
|
|
return {
|
2020-10-07 20:45:51 +08:00
|
|
|
t,
|
|
|
|
searchInputValue: ref(''),
|
|
|
|
version,
|
2020-10-30 17:42:34 +08:00
|
|
|
dev: __DEV__,
|
2021-01-13 12:01:02 +08:00
|
|
|
displayMode: useDisplayMode(),
|
|
|
|
lang: useLocaleName(),
|
|
|
|
theme: useThemeName(),
|
|
|
|
items: useFlattenedDocOptions(),
|
2020-10-07 20:45:51 +08:00
|
|
|
menuItems: menuItemsRef,
|
|
|
|
themeOptions: themeOptionsRef,
|
|
|
|
langOptions: readonly({
|
2020-02-29 17:40:09 +08:00
|
|
|
'zh-CN': {
|
2019-09-21 17:03:37 +08:00
|
|
|
label: 'English',
|
2020-02-29 17:40:09 +08:00
|
|
|
next: 'en-US'
|
|
|
|
},
|
|
|
|
'en-US': {
|
|
|
|
label: '中文',
|
|
|
|
next: 'zh-CN'
|
2019-09-21 17:03:37 +08:00
|
|
|
}
|
2020-10-07 20:45:51 +08:00
|
|
|
}),
|
|
|
|
modeOptions: readonly({
|
2020-09-27 22:27:25 +08:00
|
|
|
debug: {
|
2020-03-05 13:46:19 +08:00
|
|
|
label: 'Production',
|
2020-03-04 14:34:14 +08:00
|
|
|
next: 'common'
|
|
|
|
},
|
2020-09-27 22:27:25 +08:00
|
|
|
common: {
|
2020-03-04 14:34:14 +08:00
|
|
|
label: 'Debug',
|
|
|
|
next: 'debug'
|
|
|
|
}
|
2020-10-07 20:45:51 +08:00
|
|
|
})
|
2019-09-17 19:28:28 +08:00
|
|
|
}
|
|
|
|
},
|
2019-09-23 11:32:50 +08:00
|
|
|
computed: {
|
2020-02-27 18:09:23 +08:00
|
|
|
menuValue () {
|
|
|
|
if (/^(\/[^/]+){2}\/doc/.test(this.$route.path)) return 'doc'
|
|
|
|
else if (this.$route.name === 'home') return 'home'
|
|
|
|
return null
|
|
|
|
},
|
2019-11-22 18:49:53 +08:00
|
|
|
searchOptions () {
|
2020-02-11 18:10:49 +08:00
|
|
|
function getLabel (item) {
|
2020-12-12 15:33:41 +08:00
|
|
|
if (item.title) {
|
|
|
|
return item.title + (item.titleExtra ? ' ' + item.titleExtra : '')
|
|
|
|
}
|
2020-02-11 18:10:49 +08:00
|
|
|
return item.name
|
|
|
|
}
|
2019-11-22 18:49:53 +08:00
|
|
|
if (!this.searchInputValue) return []
|
2020-02-11 18:10:49 +08:00
|
|
|
const replaceRegex = / |-/g
|
2020-12-12 13:51:22 +08:00
|
|
|
return this.items
|
|
|
|
.filter((item) => {
|
|
|
|
const pattern = this.searchInputValue
|
|
|
|
.toLowerCase()
|
|
|
|
.replace(replaceRegex, '')
|
|
|
|
.slice(0, 20)
|
|
|
|
const label = getLabel(item).toLowerCase().replace(replaceRegex, '')
|
|
|
|
return match(pattern, label)
|
|
|
|
})
|
|
|
|
.map((item) => ({
|
|
|
|
label: getLabel(item),
|
|
|
|
value: item.path
|
|
|
|
}))
|
2019-09-23 11:32:50 +08:00
|
|
|
}
|
|
|
|
},
|
2019-09-17 19:28:28 +08:00
|
|
|
methods: {
|
2020-02-27 23:03:15 +08:00
|
|
|
handleLogoClick () {
|
2020-09-27 22:27:25 +08:00
|
|
|
if (/^(\/[^/]+){2}$/.test(this.$route.path)) {
|
2020-10-07 20:45:51 +08:00
|
|
|
this.message.info(this.t('alreadyHome'))
|
2020-09-27 22:27:25 +08:00
|
|
|
return
|
|
|
|
}
|
2020-12-12 13:51:22 +08:00
|
|
|
this.$router.push(/^(\/[^/]+){2}/.exec(this.$route.path)[0])
|
2020-02-27 23:03:15 +08:00
|
|
|
},
|
2019-11-22 18:49:53 +08:00
|
|
|
handleSelect (value) {
|
|
|
|
this.$router.push(value)
|
2020-02-27 18:09:23 +08:00
|
|
|
},
|
|
|
|
handleMenuSelect (value) {
|
|
|
|
if (value === 'home') {
|
2020-12-12 13:51:22 +08:00
|
|
|
this.$router.push(/^(\/[^/]+){2}/.exec(this.$route.path)[0])
|
|
|
|
}
|
|
|
|
if (value === 'doc') {
|
2021-02-14 14:52:14 +08:00
|
|
|
if (/^(\/[^/]+){2}\/docs/.test(this.$route.path)) {
|
|
|
|
} else {
|
|
|
|
this.$router.push(
|
|
|
|
/^(\/[^/]+){2}/.exec(this.$route.path)[0] + '/docs/start'
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (value === 'component') {
|
|
|
|
if (/^(\/[^/]+){2}\/components/.test(this.$route.path)) {
|
2020-02-27 18:09:23 +08:00
|
|
|
} else {
|
|
|
|
this.$router.push(
|
2021-02-14 14:52:14 +08:00
|
|
|
/^(\/[^/]+){2}/.exec(this.$route.path)[0] +
|
|
|
|
'/components/n-config-provider'
|
2020-02-27 18:09:23 +08:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
2019-11-22 18:49:53 +08:00
|
|
|
},
|
2020-02-29 17:40:09 +08:00
|
|
|
handleThemeChange () {
|
2020-09-27 22:27:25 +08:00
|
|
|
this.theme = this.themeOptions[this.theme].next
|
2019-09-27 22:28:25 +08:00
|
|
|
},
|
2020-03-04 14:34:14 +08:00
|
|
|
handleModeChange () {
|
2020-09-27 22:27:25 +08:00
|
|
|
this.displayMode = this.modeOptions[this.displayMode].next
|
2020-03-04 03:01:15 +08:00
|
|
|
},
|
2020-02-29 17:40:09 +08:00
|
|
|
handleLanguageChange () {
|
2020-09-27 22:27:25 +08:00
|
|
|
this.lang = this.langOptions[this.lang].next
|
2019-09-17 19:28:28 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2020-11-01 19:35:00 +08:00
|
|
|
<style scoped>
|
2019-09-17 19:28:28 +08:00
|
|
|
.nav {
|
|
|
|
display: grid;
|
2020-02-29 17:40:09 +08:00
|
|
|
grid-template-columns: 288px 1fr auto 32px;
|
2020-02-27 18:09:23 +08:00
|
|
|
grid-template-rows: 63px;
|
2019-09-17 19:28:28 +08:00
|
|
|
align-items: center;
|
|
|
|
}
|
2020-11-23 02:22:41 +08:00
|
|
|
|
2019-09-17 19:28:28 +08:00
|
|
|
.ui-logo {
|
2020-02-27 23:03:15 +08:00
|
|
|
cursor: pointer;
|
2019-10-20 00:18:55 +08:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-02-22 20:25:10 +08:00
|
|
|
padding-left: 36px;
|
2019-10-20 00:18:55 +08:00
|
|
|
font-size: 18px;
|
|
|
|
}
|
2020-11-23 02:22:41 +08:00
|
|
|
|
2019-10-20 00:18:55 +08:00
|
|
|
.ui-logo > img {
|
|
|
|
margin-right: 12px;
|
|
|
|
height: 32px;
|
|
|
|
width: 32px;
|
2019-09-17 19:28:28 +08:00
|
|
|
}
|
2020-11-23 02:22:41 +08:00
|
|
|
|
2020-02-27 18:09:23 +08:00
|
|
|
.nav-menu {
|
2020-11-28 13:34:45 +08:00
|
|
|
padding-left: 36px;
|
2020-02-27 18:09:23 +08:00
|
|
|
}
|
2020-09-17 10:43:29 +08:00
|
|
|
|
2020-03-04 14:34:14 +08:00
|
|
|
.nav-picker {
|
|
|
|
margin-right: 12px;
|
2020-11-01 19:35:00 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.nav-picker:last-child {
|
|
|
|
margin-right: 0;
|
2019-09-17 19:28:28 +08:00
|
|
|
}
|
|
|
|
</style>
|
2020-11-14 20:38:30 +08:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.nav-menu .n-menu-item {
|
|
|
|
height: 63px !important;
|
|
|
|
}
|
|
|
|
</style>
|