jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-05-10 04:37:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #592 from immortal521/fix/unlogin-cant-change-theme

Browse Source 
fix: allow theme toggle without requiring user login
This commit is contained in:
Tim
2025-08-16 11:22:36 +08:00
committed by GitHub
parent e01afb168c e042c499e1
commit 077ba448d7
2 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend_nuxt/components/HeaderComponent.vue
View File

@@ -20,7 +20,7 @@
</div> </div>
<ClientOnly> <ClientOnly>
<div v-if="isLogin" class="header-content-right"> <div class="header-content-right">
<div v-if="isMobile" class="search-icon" @click="search"> <div v-if="isMobile" class="search-icon" @click="search">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</div> </div>
@@ -29,13 +29,13 @@
<i :class="iconClass"></i> <i :class="iconClass"></i>
</div> </div>
<ToolTip v-if="!isMobile" content="发帖" placement="bottom"> <ToolTip v-if="!isMobile && isLogin" content="发帖" placement="bottom">
<div class="new-post-icon" @click="goToNewPost"> <div class="new-post-icon" @click="goToNewPost">
<i class="fas fa-edit"></i> <i class="fas fa-edit"></i>
</div> </div>
</ToolTip> </ToolTip>
<DropdownMenu ref="userMenu" :items="headerMenuItems"> <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
<template #trigger> <template #trigger>
<div class="avatar-container"> <div class="avatar-container">
<img class="avatar-img" :src="avatar" alt="avatar" /> <img class="avatar-img" :src="avatar" alt="avatar" />
@@ -43,14 +43,11 @@
</div> </div>
</template> </template>
</DropdownMenu> </DropdownMenu>
</div>
<div v-else class="header-content-right"> <div v-if="!isLogin" class="auth-btns">
<div v-if="isMobile" class="search-icon" @click="search"> <div class="header-content-item-main" @click="goToLogin">登录</div>
<i class="fas fa-search"></i> <div class="header-content-item-secondary" @click="goToSignup">注册</div>
</div> </div>
<div class="header-content-item-main" @click="goToLogin">登录</div>
<div class="header-content-item-secondary" @click="goToSignup">注册</div>
</div> </div>
</ClientOnly> </ClientOnly>
@@ -142,17 +139,17 @@ const headerMenuItems = computed(() => [
{ text: '退出', onClick: goToLogout }, { text: '退出', onClick: goToLogout },
]) ])
/** 其余逻辑保持不变 */ /** 其余逻辑保持不变 */
const iconClass = computed(() => { const iconClass = computed(() => {
switch (themeState.mode) { switch (themeState.mode) {
case ThemeMode.DARK: case ThemeMode.DARK:
return 'fas fa-moon' return 'fas fa-moon'
case ThemeMode.LIGHT: case ThemeMode.LIGHT:
return 'fas fa-sun' return 'fas fa-sun'
default: default:
return 'fas fa-desktop' return 'fas fa-desktop'
} }
}) })
onMounted(async () => { onMounted(async () => {
const updateAvatar = async () => { const updateAvatar = async () => {
@@ -210,10 +207,8 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto;
max-width: var(--page-max-width); max-width: var(--page-max-width);
} }
@@ -224,6 +219,14 @@ onMounted(async () => {
} }
.header-content-right { .header-content-right {
display: flex;
margin-left: auto;
flex-direction: row;
align-items: center;
gap: 20px;
}
.auth-btns {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -305,7 +308,8 @@ onMounted(async () => {
background-color: var(--menu-selected-background-color); background-color: var(--menu-selected-background-color);
} }
.search-icon, .theme-icon { .search-icon,
.theme-icon {
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
} }

4
frontend_nuxt/main.js
View File

@@ -1 +1,5 @@
export { toast } from './composables/useToast' export { toast } from './composables/useToast'
export const API_DOMAIN = 'https://www.open-isle.com'
export const API_PORT = ''
export const API_BASE_URL = API_PORT ? `${API_DOMAIN}:${API_PORT}` : API_DOMAIN