feat(应用): 实现带可折叠侧边栏的仪表盘布局
添加从根路径到/app/dashboard的服务器端重定向 创建包含主内容容器的应用布局组件 实现带响应式侧边栏和顶栏的仪表盘页面 添加带平滑过渡效果的侧边栏切换功能 设置基础用户状态管理仓库 使用对等依赖标志更新package-lock.json中的依赖项 从锁定文件中移除冗余的picomatch条目 添加带路径解析导入的登录页面组件
This commit is contained in:
7
src/lib/components/layout/Header.svelte
Normal file
7
src/lib/components/layout/Header.svelte
Normal file
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<div>
|
||||
header
|
||||
</div>
|
||||
0
src/lib/components/layout/Sidebar.svelte
Normal file
0
src/lib/components/layout/Sidebar.svelte
Normal file
5
src/lib/stores/userStore.ts
Normal file
5
src/lib/stores/userStore.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import {writable} from 'svelte/store';
|
||||
|
||||
export const user = writable( null);
|
||||
|
||||
|
||||
14
src/routes/+layout.server.ts
Normal file
14
src/routes/+layout.server.ts
Normal 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);
|
||||
}
|
||||
};
|
||||
@@ -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>
|
||||
|
||||
8
src/routes/app/+layout.svelte
Normal file
8
src/routes/app/+layout.svelte
Normal file
@@ -0,0 +1,8 @@
|
||||
<script lang="ts">
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<main class="">
|
||||
{@render children()}
|
||||
</main>
|
||||
37
src/routes/app/dashboard/+page.svelte
Normal file
37
src/routes/app/dashboard/+page.svelte
Normal 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>
|
||||
4
src/routes/auth/login/+page.svelte
Normal file
4
src/routes/auth/login/+page.svelte
Normal file
@@ -0,0 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user