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

18
src/components/Sidebar.tsx
View File

@ -29,8 +29,9 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
}); });
return ( return (
<div class="p-4"> <div class="flex flex-col h-full">
<div class="flex items-center justify-between mb-4"> <div class="p-4 border-b">
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-900">目录</h2> <h2 class="text-lg font-bold text-gray-900">目录</h2>
<Show when={!props.isDesktop}> <Show when={!props.isDesktop}>
<button <button
@ -42,9 +43,10 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
</button> </button>
</Show> </Show>
</div> </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 class="text-xs font-semibold text-gray-500 uppercase mb-2 px-2">
文件 文件
</h3> </h3>
@ -59,9 +61,9 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
))} ))}
</div> </div>
{/* 当前文件标题 */} {/* 当前文件标题滚动区域 */}
<Show when={currentFileHeadings().length > 0}> <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 class="text-xs font-semibold text-gray-500 uppercase mb-2 px-2">
本页 本页
</h3> </h3>
@ -104,7 +106,7 @@ export const MobileSidebar: Component<SidebarProps> = (props) => {
/> />
{/* 侧边栏 */} {/* 侧边栏 */}
<aside <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" props.isOpen ? "translate-x-0" : "-translate-x-full"
}`} }`}
> >
@ -135,7 +137,7 @@ export const DesktopSidebar: Component<{}> = () => {
}); });
return ( 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 <SidebarContent
fileTree={fileTree()} fileTree={fileTree()}
pathHeadings={pathHeadings()} pathHeadings={pathHeadings()}