cacb25a2ca
- 引入 Sprite 组件统一管理 SVG 图标 - 创建 Icon 组件支持动态加载图标- 定义 icon-ids 类型确保图标引用安全- 更新 Sidebar 使用新图标组件替换 emoji - 添加 HomeIcon 和 network 图标资源- 调整侧边栏样式和宽度 - 修复 Header 按钮 title 属性替代 aria-label - 新增 IP 工具页面路由 - 添加全局阴影变量 --main-border-shadow
50 lines
1.3 KiB
Svelte
50 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import favicon from '$lib/assets/favicon.svg';
|
|
import Header from '$lib/components/layout/Header.svelte';
|
|
import Sidebar from '$lib/components/layout/Sidebar.svelte';
|
|
import Sprite from '$lib/components/ui/Sprite.svelte';
|
|
|
|
|
|
let { children } = $props();
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<link rel="icon" href={favicon} />
|
|
<Sprite />
|
|
</svelte:head>
|
|
<Header/>
|
|
<div class="app-container">
|
|
|
|
<!-- 1. 侧边栏: 固定宽度，全高 -->
|
|
<Sidebar />
|
|
<!-- 2. 主内容区域: 占据剩余所有空间 (flex-1) -->
|
|
<main class="main-content">
|
|
<!-- 渲染子路由的内容 (+page.svelte 或下级 +layout.svelte)
|
|
使用标准的 <slot /> 替换了 {@render children()} -->
|
|
|
|
{@render children()}
|
|
</main>
|
|
</div>
|
|
|
|
<style>
|
|
/* 确保整个应用容器占满整个视口 */
|
|
.app-container {
|
|
display: flex;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden; /* 防止滚动条出现在侧边栏和主内容之间 */
|
|
background-color: #1e1e1e; /* 模拟深色背景 */
|
|
color: #f1f1f1;
|
|
padding-top: 30px;
|
|
}
|
|
|
|
/* 主内容区域占据剩余空间 */
|
|
.main-content {
|
|
flex: 1; /* 占据 Flex 容器的剩余空间 */
|
|
/* 允许主内容区域内部滚动 */
|
|
overflow-y: auto;
|
|
padding: 1rem;
|
|
}
|
|
</style>
|