3515faa814
- 将原有布局中的侧边栏和头部组件拆分为独立的 AppSidebar 和 AppHeader 组件 - 移除内联的导航逻辑和样式，交由专用组件管理 - 更新图标库，优化部分图标的显示效果 - 简化认证存储逻辑，增强状态持久化与安全性 - 优化侧边栏状态管理机制，提高响应式体验 - 改进登录流程错误处理，增加网络异常提示 - 调整路由组件结构，提升代码可维护性
60 lines
1.7 KiB
Svelte
60 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { resolve } from '$app/paths';
|
|
|
|
import Icon from '$lib/components/icon/Icon.svelte';
|
|
import ThemeSelector from '$lib/widget/ThemeSelector.svelte';
|
|
import { authStore } from '$lib/stores/authStore.ts';
|
|
import { toggleSidebar } from '$lib/stores/sidebarStore';
|
|
</script>
|
|
|
|
<header class="w-full h-18 flex justify-between items-center px-4 bg-base-300 flex-shrink-0">
|
|
<div>
|
|
<button
|
|
class="btn btn-square btn-ghost"
|
|
onclick={toggleSidebar}
|
|
aria-label="Toggle Sidebar"
|
|
>
|
|
<Icon id="menu" size="24" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex justify-center items-center gap-4 select-none">
|
|
<ThemeSelector/>
|
|
|
|
{#if $authStore.user }
|
|
<div class="dropdown dropdown-end ">
|
|
<div
|
|
role="button"
|
|
tabindex="0"
|
|
class="rounded-full bg-primary h-8 w-8 p-4 flex items-center justify-center text-primary-content font-bold"
|
|
>
|
|
{#if $authStore.user.avatar}
|
|
<img
|
|
class="w-8 h-8 rounded-full"
|
|
src="{$authStore.user.avatar}"
|
|
alt="Avatar"
|
|
/>
|
|
{:else}
|
|
<span>{$authStore.user.nickname.slice(0, 1)}</span>
|
|
{/if}
|
|
</div>
|
|
<div class="dropdown-content mt-2 w-64 shadow-base-300 p-12 shadow-2xl bg-base-200 border border-base-content/10 rounded-box ">
|
|
<div class="text-center ">
|
|
<p class="font-bold">{$authStore.user.nickname}</p>
|
|
<p class="text-xs mt-2">{$authStore.user.username}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{:else}
|
|
<div class="flex items-center">
|
|
<div class="">
|
|
<button class="btn btn-primary btn-sm" onclick={() => goto(resolve("/auth/login"))}>
|
|
登录
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</header> |