修改样式与lint
This commit is contained in:
@@ -1,144 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
// import type { NavigationMenuItem } from '@nuxt/ui'
|
|
||||||
import type { ContentNavigationItem } from '@nuxt/content'
|
|
||||||
|
|
||||||
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
|
|
||||||
|
|
||||||
const isSettingsOpen = ref(false)
|
|
||||||
const isLoginModalOpen = ref(false)
|
|
||||||
const isRegisterModalOpen = ref(false)
|
|
||||||
|
|
||||||
// const { header } = useAppConfig();
|
|
||||||
|
|
||||||
// 定义 props 来接收侧边栏状态和切换函数
|
|
||||||
interface Props {
|
|
||||||
isSidebarOpen?: boolean
|
|
||||||
toggleSidebar?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const Props = withDefaults(defineProps<Props>(), {
|
|
||||||
isSidebarOpen: false,
|
|
||||||
toggleSidebar: () => { }
|
|
||||||
})
|
|
||||||
|
|
||||||
// 登录注册函数
|
|
||||||
const handleLoginRegister = (type: 'login' | 'register') => {
|
|
||||||
if (type === 'login') {
|
|
||||||
isLoginModalOpen.value = true
|
|
||||||
} else if (type === 'register') {
|
|
||||||
isRegisterModalOpen.value = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<UHeader
|
|
||||||
toggle-side="left"
|
|
||||||
title="Estel Docs"
|
|
||||||
mode="modal"
|
|
||||||
class="bg-gray-50 dark:bg-gray-900"
|
|
||||||
>
|
|
||||||
<template #title>
|
|
||||||
<h6 />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #body>
|
|
||||||
<LogoPro class="h-5 w-auto mb-4" />
|
|
||||||
<DocsAsideLeftTop />
|
|
||||||
<div class="mt-4 mb-4 border-t border-gray-200 dark:border-gray-700 w-9/10 mx-5" />
|
|
||||||
<UContentNavigation
|
|
||||||
highlight
|
|
||||||
:navigation="navigation"
|
|
||||||
color="primary"
|
|
||||||
type="single"
|
|
||||||
variant="pill"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #right>
|
|
||||||
<UContentSearchButton class="lg:hidden" />
|
|
||||||
<UColorModeButton />
|
|
||||||
<button
|
|
||||||
class=" p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|
||||||
title="页面设置"
|
|
||||||
@click="isSettingsOpen = !isSettingsOpen"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="w-5 h-5"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<UTooltip
|
|
||||||
text="Open on GitHub"
|
|
||||||
:kbds="['meta', 'G']"
|
|
||||||
>
|
|
||||||
<UButton
|
|
||||||
color="neutral"
|
|
||||||
variant="ghost"
|
|
||||||
to="https://github.com/estel-li"
|
|
||||||
target="_blank"
|
|
||||||
icon="simple-icons-github"
|
|
||||||
aria-label="GitHub"
|
|
||||||
/>
|
|
||||||
</UTooltip>
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<button
|
|
||||||
class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
|
||||||
@click="handleLoginRegister('login')"
|
|
||||||
>
|
|
||||||
登录
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="text-sm font-medium text-white bg-primary rounded-md px-3 py-2 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
|
|
||||||
@click="handleLoginRegister('register')"
|
|
||||||
>
|
|
||||||
注册
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</UHeader>
|
|
||||||
|
|
||||||
<!-- Theme Settings Panel -->
|
|
||||||
<ThemeSettings
|
|
||||||
:is-open="isSettingsOpen"
|
|
||||||
@close="isSettingsOpen = false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 登录模态框 -->
|
|
||||||
<UModal
|
|
||||||
v-model:open="isLoginModalOpen"
|
|
||||||
title="登录"
|
|
||||||
:dismissible="false"
|
|
||||||
>
|
|
||||||
<template #body>
|
|
||||||
<authLogin />
|
|
||||||
</template>
|
|
||||||
</UModal>
|
|
||||||
|
|
||||||
<!-- 注册模态框 -->
|
|
||||||
<UModal
|
|
||||||
v-model:open="isRegisterModalOpen"
|
|
||||||
title="注册"
|
|
||||||
:dismissible="false"
|
|
||||||
>
|
|
||||||
<template #body>
|
|
||||||
<authRegister />
|
|
||||||
</template>
|
|
||||||
</UModal>
|
|
||||||
</template>
|
|
||||||
@@ -49,6 +49,15 @@ const handleLoginRegister = (type: 'login' | 'register') => {
|
|||||||
mode="modal"
|
mode="modal"
|
||||||
class="bg-gray-50 dark:bg-gray-900"
|
class="bg-gray-50 dark:bg-gray-900"
|
||||||
>
|
>
|
||||||
|
<template #toggle="{ open, toggle }">
|
||||||
|
<UButton
|
||||||
|
color="neutral"
|
||||||
|
variant="ghost"
|
||||||
|
:icon="open ? 'lucide-x' : 'simple-icons-microsoft'"
|
||||||
|
aria-label="切换菜单"
|
||||||
|
@click="toggle"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
<template #title>
|
<template #title>
|
||||||
<h6 />
|
<h6 />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -49,6 +49,15 @@ const handleLoginRegister = (type: 'login' | 'register') => {
|
|||||||
mode="modal"
|
mode="modal"
|
||||||
class="bg-gray-50 dark:bg-gray-900"
|
class="bg-gray-50 dark:bg-gray-900"
|
||||||
>
|
>
|
||||||
|
<template #toggle="{ open, toggle }">
|
||||||
|
<UButton
|
||||||
|
color="neutral"
|
||||||
|
variant="ghost"
|
||||||
|
:icon="open ? 'lucide-x' : 'simple-icons-microsoft'"
|
||||||
|
aria-label="切换菜单"
|
||||||
|
@click="toggle"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
<template #title>
|
<template #title>
|
||||||
<h6 />
|
<h6 />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -98,8 +98,6 @@ function setupShare(appId: string, timestamp: number, nonceStr: string, signatur
|
|||||||
console.error('[WxShare] wx.error:', e)
|
console.error('[WxShare] wx.error:', e)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@@ -41,7 +41,7 @@
|
|||||||
* </template>
|
* </template>
|
||||||
* ```
|
* ```
|
||||||
*/
|
*/
|
||||||
import { ref, watch } from 'vue'
|
import { ref, watch, getCurrentInstance, onMounted } from 'vue'
|
||||||
|
|
||||||
// 定义各种选项
|
// 定义各种选项
|
||||||
const themes = [
|
const themes = [
|
||||||
@@ -224,18 +224,34 @@ export function useTheme() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 确保在客户端时立即初始化
|
// 确保在客户端时初始化
|
||||||
if (import.meta.client) {
|
if (import.meta.client) {
|
||||||
// 立即初始化，避免闪烁
|
// 立即初始化，避免闪烁
|
||||||
initializeTheme()
|
initializeTheme()
|
||||||
|
|
||||||
// 确保在DOM准备好后再次应用
|
const instance = getCurrentInstance()
|
||||||
onMounted(() => {
|
if (instance) {
|
||||||
applyThemeVariables()
|
// 在组件 setup 上下文中，安全使用 onMounted
|
||||||
if (selectedThemeColor.value === 'custom') {
|
onMounted(() => {
|
||||||
applyCustomColor()
|
applyThemeVariables()
|
||||||
|
if (selectedThemeColor.value === 'custom') {
|
||||||
|
applyCustomColor()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 非组件上下文（如插件）中，等待文档就绪后应用
|
||||||
|
const run = () => {
|
||||||
|
applyThemeVariables()
|
||||||
|
if (selectedThemeColor.value === 'custom') {
|
||||||
|
applyCustomColor()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
if (document.readyState === 'loading') {
|
||||||
|
window.addEventListener('DOMContentLoaded', () => run(), { once: true })
|
||||||
|
} else {
|
||||||
|
run()
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const resetSettings = () => {
|
const resetSettings = () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user