From 5454bbe86b1a22e9f05b6bc43f7ed7e9d6c4dc14 Mon Sep 17 00:00:00 2001
From: zhou zhou <3272660260@qq.com>
Date: 星期五, 03 四月 2026 09:34:15 +0800
Subject: [PATCH] #版权 PROJECT_COPYRIGHT logo PROJECT_LOGO 配置项和页面优化
---
rsf-design/src/components/core/views/login/AuthTopBar.vue | 111 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 86 insertions(+), 25 deletions(-)
diff --git a/rsf-design/src/components/core/views/login/AuthTopBar.vue b/rsf-design/src/components/core/views/login/AuthTopBar.vue
index 9e086e0..4ce50ab 100644
--- a/rsf-design/src/components/core/views/login/AuthTopBar.vue
+++ b/rsf-design/src/components/core/views/login/AuthTopBar.vue
@@ -3,9 +3,8 @@
<div
class="absolute w-full flex-cb top-4.5 z-10 flex-c !justify-end max-[1180px]:!justify-between"
>
- <div class="flex-cc !hidden max-[1180px]:!flex ml-2 max-sm:ml-6">
- <ArtLogo class="icon" size="46" />
- <h1 class="text-xl ont-mediumf ml-2">{{ AppConfig.systemInfo.name }}</h1>
+ <div class="brand flex-cc !hidden max-[1180px]:!flex ml-2 max-sm:ml-6">
+ <ArtLogo class="icon" fill />
</div>
<div class="flex-cc gap-1.5 mr-2 max-sm:mr-5">
@@ -31,35 +30,35 @@
/>
</div>
</div>
- <ElDropdown
+ <div
v-if="shouldShowLanguage"
- @command="changeLanguage"
- popper-class="langDropDownStyle"
+ class="language-picker relative flex-c"
+ @mouseenter="showLanguageMenu = true"
+ @mouseleave="showLanguageMenu = false"
>
- <div class="btn language-btn h-8 w-8 c-p flex-cc tad-300">
+ <div class="btn language-btn h-8 w-8 c-p flex-cc tad-300" @click="toggleLanguageMenu">
<ArtSvgIcon
icon="ri:translate-2"
class="text-[19px] text-g-800 transition-colors duration-300"
/>
</div>
- <template #dropdown>
- <ElDropdownMenu>
- <div v-for="lang in languageOptions" :key="lang.value" class="lang-btn-item">
- <ElDropdownItem
- :command="lang.value"
- :class="{ 'is-selected': locale === lang.value }"
- >
- <span class="menu-txt">{{ lang.label }}</span>
- <ArtSvgIcon icon="ri:check-fill" class="text-base" v-if="locale === lang.value" />
- </ElDropdownItem>
- </div>
- </ElDropdownMenu>
- </template>
- </ElDropdown>
+ <div class="language-menu absolute right-0 top-10" :class="{ 'is-open': showLanguageMenu }">
+ <div
+ v-for="lang in languageOptions"
+ :key="lang.value"
+ class="language-menu-item flex-cb c-p"
+ :class="{ 'is-selected': locale === lang.value }"
+ @click="changeLanguage(lang.value)"
+ >
+ <span class="menu-txt">{{ lang.label }}</span>
+ <ArtSvgIcon icon="ri:check-fill" class="text-base" v-if="locale === lang.value" />
+ </div>
+ </div>
+ </div>
<div
v-if="shouldShowThemeToggle"
class="btn theme-btn h-8 w-8 c-p flex-cc tad-300"
- @click="themeAnimation"
+ @click="handleThemeAnimation"
>
<ArtSvgIcon
:icon="isDark ? 'ri:sun-fill' : 'ri:moon-line'"
@@ -71,22 +70,23 @@
</template>
<script setup>
+ import AppConfig from '@/config'
import { useI18n } from 'vue-i18n'
+ import { languageOptions } from '@/locales/language-options'
import { useSettingStore } from '@/store/modules/setting'
import { useUserStore } from '@/store/modules/user'
import { useHeaderBar } from '@/hooks/core/useHeaderBar'
- import { themeAnimation } from '@/utils/ui/animation'
- import { languageOptions } from '@/locales'
- import AppConfig from '@/config'
defineOptions({ name: 'AuthTopBar' })
const settingStore = useSettingStore()
const userStore = useUserStore()
const { isDark, systemThemeColor } = storeToRefs(settingStore)
const { shouldShowThemeToggle, shouldShowLanguage } = useHeaderBar()
const { locale } = useI18n()
+ const showLanguageMenu = ref(false)
const mainColors = AppConfig.systemMainColor
const color = systemThemeColor
const changeLanguage = (lang) => {
+ showLanguageMenu.value = false
if (locale.value === lang) return
locale.value = lang
userStore.setLanguage(lang)
@@ -96,9 +96,26 @@
settingStore.setElementTheme(color2)
settingStore.reload()
}
+ const handleThemeAnimation = async (event) => {
+ const { themeAnimation } = await import('@/utils/ui/animation')
+ themeAnimation(event)
+ }
+ const toggleLanguageMenu = () => {
+ showLanguageMenu.value = !showLanguageMenu.value
+ }
</script>
<style scoped>
+ .brand {
+ width: 132px;
+ height: 34px;
+ }
+
+ .icon {
+ width: 100%;
+ height: 100%;
+ }
+
.color-dots {
pointer-events: none;
backdrop-filter: blur(10px);
@@ -137,6 +154,50 @@
box-shadow: none;
}
+ .language-menu {
+ min-width: 130px;
+ padding: 6px;
+ pointer-events: none;
+ background-color: var(--default-box-color);
+ border-radius: 12px;
+ box-shadow: 0 2px 12px var(--art-gray-300);
+ opacity: 0;
+ transform: translateY(8px);
+ transition:
+ opacity 0.2s ease,
+ transform 0.2s ease;
+ }
+
+ .language-menu.is-open {
+ pointer-events: auto;
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .language-menu-item {
+ height: 34px;
+ padding: 0 12px;
+ color: var(--art-text-gray-800);
+ border-radius: 10px;
+ transition:
+ background-color 0.2s ease,
+ color 0.2s ease;
+ }
+
+ .language-menu-item:hover,
+ .language-menu-item.is-selected {
+ background-color: var(--art-gray-100);
+ }
+
+ .menu-txt {
+ font-size: 13px;
+ }
+
+ .dark .language-menu {
+ background-color: var(--art-gray-200);
+ box-shadow: none;
+ }
+
.color-picker-expandable:hover .palette-btn :deep(.art-svg-icon) {
color: v-bind(color);
}
--
Gitblit v1.9.1