fix(auth): 修复登录跳转和图标组件属性问题

- 移除调试日志和冗余类型断言
- 修复图标组件属性名从 Cid 到 id
- 更新登录成功后的页面跳转逻辑
- 优化侧边栏用户卡片渲染逻辑
- 调整侧边栏样式和布局结构
- 添加用户信息下拉菜单占位内容
This commit is contained in:
Chaos
2025-12-06 20:01:24 +08:00
parent fefa836ee7
commit a4b207df29
2 changed files with 35 additions and 15 deletions

View File

@@ -6,7 +6,9 @@
import Icon from '$lib/components/icon/Icon.svelte';
import { TOAST_KEY, type ToastState } from '$lib/stores/toast.svelte.ts';
import type { RouteId } from '$app/types';
import { page } from '$app/state';
import { page } from '$app/state';
const rawNavItems: NavItem[] = [
{
@@ -118,20 +120,21 @@
};
let menuItems = $derived(computeNavState(rawNavItems, page.url.pathname, expandedIds));
let userProfileOpen = $state(false);
</script>
<aside class="custom-scrollbar h-screen bg-base-200 flex flex-col rounded-r-box overflow-hidden">
<div class="flex items-center h-18 w-full">
<aside class="custom-scrollbar h-screen bg-base-200 flex flex-col rounded-r-box overflow-hidden w-64">
<div class="flex items-center h-18 w-full bg-base-200">
<div class="space-x-4 pl-6 w-full">
<Icon id="logo" className="inline" size="36"/><h1 class="font-mono font-bold text-[0.85rem] inline align-bottom">IT Management System</h1>
</div>
</div>
<div class="overflow-y-auto flex-1 ">
<ul class="menu bg-base-200 w-64 px-4 pb-4 pt-0 text-base-content flex-nowrap ">
<ul class="menu bg-base-200 w-full px-4 pb-4 pt-0 text-base-content flex-nowrap ">
{#each menuItems as item (item.id)}
<li class="{item.isActive ? 'menu-active' : ''} w-full rounded-box ">
{#if item.subItems && item.subItems.length > 0}
@@ -191,8 +194,8 @@
</ul>
</div>
<div class="h-24 w-full shadow-2xl ">
12312
<div class="h-24 w-full bg-base-200 ">
{@render UserCard( )}
</div>
</aside>
@@ -209,3 +212,24 @@
border-radius: 20px;
}
</style>
{#snippet UserCard()}
{#if page.data.user}
<div class="flex items-center px-4 h-full select-none w-full overflow-hidden hover:bg-base-100 cursor-pointer transition-all dropdown dropdown-top dropdown-end">
<div class="flex gap-4 w-full" tabindex="0" role="button" >
<div class="w-12 h-12 rounded-box overflow-hidden flex-shrink-0"> <img src={page.data.user.avatar} alt="avatar" class="w-full h-full object-cover">
</div>
<div class="flex-1 min-w-0">
<p class="truncate font-medium">{page.data.user.nickname}</p>
<p class="text-xs mt-2 truncate text-base-content/60">@{page.data.user.username}</p>
</div>
</div>
</div>
<ul tabindex="-1" class="dropdown-contents menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
{/if}
{/snippet}

View File

@@ -28,17 +28,13 @@
}else if (result.type === 'success') {
console.log('result', result)
const { userProfile } = result.data as AuthResponse;
if (typeof result.data?.message === 'string' ){
toast.success(result.data?.message || '登录成功')
}
if (result.data?.redirectTo && typeof result.data?.redirectTo === 'string') {
// @ts-expect-error : 设计
await goto(resolve(result.data.redirectTo as RouteId ));
}
}
@@ -55,7 +51,7 @@
<div class="text-center mb-4">
<h2 class="text-2xl font-bold flex justify-center items-center gap-2">
<Icon Cid="logo" size="40" className="inline-block"></Icon>
<Icon id="logo" size="40" className="inline-block"></Icon>
<span>IT DTMS登录</span>
</h2>
</div>