feat(应用): 实现带可折叠侧边栏的仪表盘布局

添加从根路径到/app/dashboard的服务器端重定向
创建包含主内容容器的应用布局组件
实现带响应式侧边栏和顶栏的仪表盘页面
添加带平滑过渡效果的侧边栏切换功能
设置基础用户状态管理仓库
使用对等依赖标志更新package-lock.json中的依赖项
从锁定文件中移除冗余的picomatch条目
添加带路径解析导入的登录页面组件
This commit is contained in:
Chaos
2025-11-20 17:22:14 +08:00
parent 6273f8f714
commit 86030df690
9 changed files with 112 additions and 47 deletions

View File

@@ -0,0 +1,7 @@
<script lang="ts">
</script>
<div>
header
</div>

View File

View File

@@ -0,0 +1,5 @@
import {writable} from 'svelte/store';
export const user = writable( null);

View File

@@ -0,0 +1,14 @@
import { redirect } from '@sveltejs/kit';
import type { LayoutServerLoad } from '../../.svelte-kit/types/src/routes/$types';
export const load: LayoutServerLoad = async ({url}) => {
const targetPath = '/app/dashboard';
// 2. 检查当前访问的路径是否为根路径 '/'
// 并且确保当前路径不是目标路径本身,以避免无限循环
if (url.pathname === '/') {
// 如果是根路径,则执行重定向到目标路径
throw redirect(302, targetPath);
}
};

View File

@@ -1,2 +1,7 @@
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
<script lang="ts">
import { redirect } from '@sveltejs/kit';
import { resolve } from '$app/paths';
redirect(302, `${resolve}/app/dashboard`);
</script>

View File

@@ -0,0 +1,8 @@
<script lang="ts">
let { children } = $props();
</script>
<main class="">
{@render children()}
</main>

View File

@@ -0,0 +1,37 @@
<script>
let isExpanded = false;
function toggleSidebar() {
isExpanded = !isExpanded;
}
</script>
<div class="flex h-screen bg-[#131314] text-gray-200 font-sans overflow-hidden">
<aside class="flex-shrink-0 flex flex-col bg-[#1e1f20] border-r border-gray-700/30
transition-all duration-300 ease-in-out relative
{isExpanded ? 'w-[280px]' : 'w-[72px]'}">
<div class="h-16 flex items-center px-4 justify-start">
<button
on:click={toggleSidebar}
class="p-2 hover:bg-gray-700/50 rounded-full text-gray-400 transition-colors"
aria-label="Toggle Menu"
>
123
</button>
</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</aside>
<div class="w-full">
<header class="w-full h-18 flex justify-end items-center px-4 bg-gray-300 ">
<div class=" rounded-full bg-black h-12 w-12 ">
</div>
</header>
</div>
</div>

View File

@@ -0,0 +1,4 @@
<script lang="ts">
import { resolve } from '$app/paths';
</script>