2021-04-06 00:40:02 +08:00
|
|
|
import { computed, ref } from 'vue'
|
2021-03-30 02:25:22 +08:00
|
|
|
import { useMemo } from 'vooks'
|
2021-01-13 17:22:54 +08:00
|
|
|
import {
|
2021-02-17 23:31:56 +08:00
|
|
|
NConfigProvider,
|
2021-01-13 17:22:54 +08:00
|
|
|
darkTheme,
|
|
|
|
enUS,
|
|
|
|
zhCN,
|
|
|
|
dateEnUS,
|
|
|
|
dateZhCN,
|
|
|
|
useOsTheme
|
2021-03-30 02:25:22 +08:00
|
|
|
} from 'naive-ui'
|
2021-02-17 23:31:56 +08:00
|
|
|
import { TsConfigProvider } from '../../themes/tusimple/src'
|
2021-04-06 01:31:09 +08:00
|
|
|
import { i18n, useIsXs } from '../utils/composables'
|
2021-02-14 14:52:14 +08:00
|
|
|
import {
|
|
|
|
createDocumentationMenuOptions,
|
|
|
|
createComponentMenuOptions
|
|
|
|
} from './menu-options'
|
2021-01-13 12:31:41 +08:00
|
|
|
import hljs from './hljs'
|
2021-01-13 12:01:02 +08:00
|
|
|
|
2021-04-06 00:40:02 +08:00
|
|
|
let route = null
|
|
|
|
let router = null
|
2021-01-13 12:01:02 +08:00
|
|
|
|
2021-04-06 00:40:02 +08:00
|
|
|
export function initRouter (_router, _route) {
|
|
|
|
route = _route
|
|
|
|
router = _router
|
|
|
|
localeNameRef = useMemo({
|
2021-01-13 12:01:02 +08:00
|
|
|
get () {
|
2021-03-23 19:46:32 +08:00
|
|
|
return route.path.startsWith('/zh-CN') ? 'zh-CN' : 'en-US'
|
2021-01-13 12:01:02 +08:00
|
|
|
},
|
|
|
|
set (locale) {
|
|
|
|
router.push(changeLangInPath(route.fullPath, locale))
|
|
|
|
}
|
|
|
|
})
|
2021-04-06 00:40:02 +08:00
|
|
|
dateLocaleRef = useMemo(() => {
|
2021-04-09 02:36:29 +08:00
|
|
|
return route.path.startsWith('/zh-CN') ? dateZhCN : dateEnUS
|
2021-01-13 12:01:02 +08:00
|
|
|
})
|
2021-04-06 00:40:02 +08:00
|
|
|
themeNameRef = useMemo({
|
2021-01-13 12:01:02 +08:00
|
|
|
get () {
|
|
|
|
switch (route.params.theme) {
|
|
|
|
case 'os-theme':
|
2021-01-13 17:22:54 +08:00
|
|
|
return osThemeRef.value
|
2021-01-13 12:01:02 +08:00
|
|
|
case 'dark':
|
|
|
|
return 'dark'
|
|
|
|
default:
|
|
|
|
return 'light'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
set (theme) {
|
|
|
|
router.push(changeThemeInPath(route.fullPath, theme))
|
|
|
|
}
|
|
|
|
})
|
2021-04-06 00:40:02 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// display mode
|
|
|
|
const _displayModeRef = ref(window.localStorage.getItem('mode') ?? 'debug')
|
|
|
|
const displayModeRef = computed({
|
|
|
|
get () {
|
|
|
|
return _displayModeRef.value
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
_displayModeRef.value = value
|
|
|
|
window.localStorage.setItem('mode', value)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
// locale
|
|
|
|
let localeNameRef = null
|
|
|
|
const localeRef = computed(() => {
|
|
|
|
return localeNameRef.value === 'zh-CN' ? zhCN : enUS
|
|
|
|
})
|
|
|
|
|
|
|
|
// useMemo
|
|
|
|
let dateLocaleRef = null
|
|
|
|
|
|
|
|
// theme
|
|
|
|
const osThemeRef = useOsTheme()
|
|
|
|
let themeNameRef = null
|
|
|
|
const themeRef = computed(() => {
|
|
|
|
const { value } = themeNameRef
|
|
|
|
return value === 'dark' ? darkTheme : null
|
|
|
|
})
|
|
|
|
|
|
|
|
// config provider
|
|
|
|
const configProviderNameRef = ref(process.env.TUSIMPLE ? 'tusimple' : 'default')
|
|
|
|
const configProviderRef = computed(() => {
|
|
|
|
return configProviderNameRef.value === 'tusimple'
|
|
|
|
? TsConfigProvider
|
|
|
|
: NConfigProvider
|
|
|
|
})
|
|
|
|
|
|
|
|
// options
|
|
|
|
const docOptionsRef = computed(() =>
|
|
|
|
createDocumentationMenuOptions({
|
|
|
|
theme: themeNameRef.value,
|
|
|
|
lang: localeNameRef.value,
|
|
|
|
mode: displayModeRef.value
|
2021-02-17 23:31:56 +08:00
|
|
|
})
|
2021-04-06 00:40:02 +08:00
|
|
|
)
|
|
|
|
const componentOptionsRef = computed(() =>
|
|
|
|
createComponentMenuOptions({
|
|
|
|
theme: themeNameRef.value,
|
|
|
|
lang: localeNameRef.value,
|
|
|
|
mode: displayModeRef.value
|
2021-01-13 12:01:02 +08:00
|
|
|
})
|
2021-04-06 00:40:02 +08:00
|
|
|
)
|
|
|
|
const flattenedDocOptionsRef = computed(() => {
|
|
|
|
const flattenedItems = []
|
|
|
|
const traverse = (items) => {
|
|
|
|
if (!items) return
|
|
|
|
items.forEach((item) => {
|
|
|
|
if (item.children) traverse(item.children)
|
|
|
|
else flattenedItems.push(item)
|
2021-01-13 12:01:02 +08:00
|
|
|
})
|
2021-04-06 00:40:02 +08:00
|
|
|
}
|
|
|
|
traverse(docOptionsRef.value)
|
|
|
|
traverse(componentOptionsRef.value)
|
|
|
|
return flattenedItems
|
|
|
|
})
|
|
|
|
|
|
|
|
export function siteSetup () {
|
2021-01-13 12:01:02 +08:00
|
|
|
i18n.provide(computed(() => localeNameRef.value))
|
2021-04-06 01:31:09 +08:00
|
|
|
const isXsRef = useIsXs()
|
2021-01-13 12:01:02 +08:00
|
|
|
return {
|
2021-04-05 17:59:04 +08:00
|
|
|
themeEditorStyle: computed(() => {
|
2021-04-06 01:31:09 +08:00
|
|
|
return isXsRef.value ? 'right: 18px; bottom: 24px;' : undefined
|
2021-04-05 17:59:04 +08:00
|
|
|
}),
|
2021-02-17 23:31:56 +08:00
|
|
|
configProvider: configProviderRef,
|
2021-01-13 12:31:41 +08:00
|
|
|
hljs,
|
2021-03-05 00:39:10 +08:00
|
|
|
themeName: themeNameRef,
|
2021-01-13 12:01:02 +08:00
|
|
|
theme: themeRef,
|
|
|
|
locale: localeRef,
|
|
|
|
dateLocale: dateLocaleRef
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function changeLangInPath (path, lang) {
|
|
|
|
const langReg = /^\/(zh-CN|en-US)\//
|
|
|
|
return path.replace(langReg, `/${lang}/`)
|
|
|
|
}
|
|
|
|
|
|
|
|
function changeThemeInPath (path, theme) {
|
|
|
|
const themeReg = /(^\/[^/]+\/)([^/]+)/
|
|
|
|
return path.replace(themeReg, '$1' + theme)
|
|
|
|
}
|
|
|
|
|
|
|
|
export function useDisplayMode () {
|
2021-04-06 00:40:02 +08:00
|
|
|
return displayModeRef
|
2021-01-13 12:01:02 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export function useLocaleName () {
|
2021-04-06 00:40:02 +08:00
|
|
|
return localeNameRef
|
2021-01-13 12:01:02 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export function useThemeName () {
|
2021-04-06 00:40:02 +08:00
|
|
|
return themeNameRef
|
2021-01-13 12:01:02 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export function useDocOptions () {
|
2021-04-06 00:40:02 +08:00
|
|
|
return docOptionsRef
|
2021-01-13 12:01:02 +08:00
|
|
|
}
|
|
|
|
|
2021-02-14 14:52:14 +08:00
|
|
|
export function useComponentOptions () {
|
2021-04-06 00:40:02 +08:00
|
|
|
return componentOptionsRef
|
2021-02-14 14:52:14 +08:00
|
|
|
}
|
|
|
|
|
2021-01-13 12:01:02 +08:00
|
|
|
export function useFlattenedDocOptions () {
|
2021-04-06 00:40:02 +08:00
|
|
|
return flattenedDocOptionsRef
|
2021-01-13 12:01:02 +08:00
|
|
|
}
|
2021-02-17 23:31:56 +08:00
|
|
|
|
|
|
|
export function useConfigProviderName () {
|
2021-04-06 00:40:02 +08:00
|
|
|
return configProviderNameRef
|
2021-02-17 23:31:56 +08:00
|
|
|
}
|