hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: layout

This commit is contained in:
hypercross 2026-03-23 19:01:42 +08:00
parent f658fd3380
commit 30ddcfc32d
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Sidebar.tsx
View File

@ -29,22 +29,24 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
});
return (
<div class="p-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold text-gray-900">目录</h2>
<Show when={!props.isDesktop}>
<button
onClick={props.onClose}
class="text-gray-500 hover:text-gray-700"
title="关闭"
>
✕
</button>
</Show>
<div class="flex flex-col h-full">
<div class="p-4 border-b">
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-900">目录</h2>
<Show when={!props.isDesktop}>
<button
onClick={props.onClose}
class="text-gray-500 hover:text-gray-700"
title="关闭"
>
✕
</button>
</Show>
</div>
</div>
{/* 文件树 */}
<div class="mb-4">
{/* 文件树滚动区域 */}
<div class="flex-1 overflow-y-auto p-4 min-h-0">
<h3 class="text-xs font-semibold text-gray-500 uppercase mb-2 px-2">
文件
</h3>
@ -59,9 +61,9 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
))}
</div>
{/* 当前文件标题 */}
{/* 当前文件标题滚动区域 */}
<Show when={currentFileHeadings().length > 0}>
<div class="xl:fixed xl:top-20 xl:right-4 xl:bottom-4 xl:overflow-y-auto xl:max-w-30 2xl:max-w-60">
<div class="flex-1 border-t overflow-y-auto p-4 min-h-0">
<h3 class="text-xs font-semibold text-gray-500 uppercase mb-2 px-2">
本页
</h3>
@ -104,7 +106,7 @@ export const MobileSidebar: Component<SidebarProps> = (props) => {
/>
{/* 侧边栏 */}
<aside
class={`fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-50 overflow-y-auto transform transition-transform duration-300 ease-in-out md:hidden ${
class={`fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-50 transform transition-transform duration-300 ease-in-out md:hidden ${
props.isOpen ? "translate-x-0" : "-translate-x-full"
}`}
>
@ -135,7 +137,7 @@ export const DesktopSidebar: Component<{}> = () => {
});
return (
<aside class="hidden md:block fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-30 overflow-y-auto pt-16">
<aside class="hidden md:block fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-30 overflow-hidden pt-16">
<SidebarContent
fileTree={fileTree()}
pathHeadings={pathHeadings()}