kevin/ops2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
kevin
2026-03-31 20:49:06 +08:00
parent 498cc78dce
commit 0fef2eaaa9
7 changed files with 606 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/ops_vue_js/src/components/AppHeader.vue
+75 -19
View File
@@ -165,6 +165,64 @@ const navItems = computed(() => [
{{ t("message.login_or_register") }}
</RouterLink>
</div>
<!-- Mobile user avatar (only when logged in) -->
<div v-if="userStore.isLoggedIn" class="ml-3 md:hidden">
<button
class="rounded-md p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-dk-card dark:hover:text-dk-text"
@click="userDropdownOpen = !userDropdownOpen"
>
<img
:src="userStore.avatarUrl"
class="h-7 w-7 rounded-full object-cover"
alt="avatar"
/>
</button>
<Transition
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<div
v-if="userDropdownOpen"
class="absolute right-4 z-50 mt-1 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-dk-muted dark:bg-dk-card"
>
<div class="px-4 py-2 text-sm text-gray-600 dark:text-dk-subtle">
<div class="flex items-center gap-2">
<img
:src="userStore.avatarUrl"
class="h-8 w-8 rounded-full object-cover"
alt="avatar"
/>
<div class="truncate">{{ userStore.user?.Name || "" }}</div>
</div>
</div>
<hr class="my-1 border-gray-200 dark:border-dk-muted" />
<RouterLink
to="/settings/account"
class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-dk-subtle dark:hover:bg-dk-muted"
@click="userDropdownOpen = false"
>
<IconSettings :size="16" />
{{ t("message.user_settings") }}
</RouterLink>
<hr class="my-1 border-gray-200 dark:border-dk-muted" />
<button
class="flex w-full items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
@click="
handleLogout();
userDropdownOpen = false;
"
>
<IconLogout :size="16" />
{{ t("message.logout") }}
</button>
</div>
</Transition>
</div>
</div>
<!-- Mobile menu -->
@@ -208,27 +266,25 @@ const navItems = computed(() => [
<IconMoon v-if="!isDark" :size="20" />
<IconSun v-else :size="20" />
</button>
<div class="ml-auto">
<RouterLink
v-if="!userStore.isLoggedIn"
to="/login"
class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700"
@click="mobileMenuOpen = false"
>
{{ t("message.login_or_register") }}
</RouterLink>
<button
v-else
class="rounded-md px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 dark:text-red-400"
@click="
handleLogout();
mobileMenuOpen = false;
"
>
{{ t("message.logout") }}
</button>
<div class="ml-auto">
<RouterLink
v-if="!userStore.isLoggedIn"
to="/login"
class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700"
@click="mobileMenuOpen = false"
>
{{ t("message.login_or_register") }}
</RouterLink>
<div v-else class="flex items-center gap-2 text-sm text-gray-600 dark:text-dk-subtle">
<img
:src="userStore.avatarUrl"
class="h-6 w-6 rounded-full object-cover"
alt="avatar"
/>
<span class="truncate">{{ userStore.user?.Name || "" }}</span>
</div>
</div>
</div>
</div>
</Transition>
</header>