GithubBackup/BiliNote
1
0
Fork 0
mirror of https://github.com/JefferyHcool/BiliNote.git synced 2026-07-26 16:28:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(layout): 优化首页布局并添加可调整面板 fixes #123

Browse Source 
- 使用 react-resizable-panels 实现可调整大小的面板
- 重新布局首页结构，分为左、中、右三个可调整区域
- 更新 NoteForm 和 NoteHistory 组件以适应新布局
- 调整 History 组件样式，优化滚动体验
- 更新项目依赖，添加 react-resizable-panels
This commit is contained in:
思诺特
2025-04-27 21:55:38 +08:00
parent 508a0efd92
commit 246e8a1406
7 changed files with 355 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
BillNote_frontend/src/layouts/HomeLayout.tsx
View File

@@ -9,6 +9,7 @@ import {
import { useState } from 'react'
import { Link } from 'react-router-dom'
import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from '@/components/ui/resizable'
interface IProps {
NoteForm: React.ReactNode
@@ -19,59 +20,53 @@ const HomeLayout: FC<IProps> = ({ NoteForm, Preview, History }) => {
const [, setShowSettings] = useState(false)
return (
<div className="flex h-screen flex-col overflow-hidden bg-white">
<div className="flex flex-1">
{/* 左侧部分：Header + 表单 */}
<aside className="flex w-[340px] flex-col border-r border-neutral-200 bg-white">
{/* Header */}
<header className="flex h-16 items-center justify-between px-6">
<div className="flex items-center gap-2">
<div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl">
<img src="/icon.svg" alt="logo" className="h-full w-full object-contain" />
<div className="flex h-screen flex-col overflow-hidden">
<ResizablePanelGroup direction="horizontal" className="h-full w-full">
{/* 左边表单 */}
<ResizablePanel defaultSize={18} minSize={10} maxSize={35}>
<aside className="flex h-full flex-col overflow-hidden border-r border-neutral-200 bg-white">
<header className="flex h-16 items-center justify-between px-6">
<div className="flex items-center gap-2">
<div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl">
<img src="/icon.svg" alt="logo" className="h-full w-full object-contain" />
</div>
<div className="text-2xl font-bold text-gray-800">BiliNote</div>
</div>
<div className="text-2xl font-bold text-gray-800">BiliNote</div>
</div>
<div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger onClick={() => setShowSettings(true)}>
<Link to={'/settings'}>
<SlidersHorizontal className="text-muted-foreground hover:text-primary cursor-pointer" />
</Link>
</TooltipTrigger>
<TooltipContent>
<span>全局配置</span>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</header>
<div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger onClick={() => setShowSettings(true)}>
<Link to={'/settings'}>
<SlidersHorizontal className="text-muted-foreground hover:text-primary cursor-pointer" />
</Link>
</TooltipTrigger>
<TooltipContent>
<span>全局配置</span>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</header>
<div className="flex-1 overflow-auto p-4">{NoteForm}</div>
</aside>
</ResizablePanel>
{/* 表单内容 */}
<div className="flex-1 overflow-auto p-4">
{/*<NoteForm />*/}
{NoteForm}
</div>
</aside>
<aside className="flex h-full w-[300px] flex-col border-r border-neutral-200 bg-white">
{/* Header */}
<ResizableHandle />
{/* 表单内容 */}
{/*<NoteForm />*/}
{History}
</aside>
{/* 中间历史 */}
<ResizablePanel defaultSize={16} minSize={10} maxSize={30}>
<aside className="flex h-full flex-col overflow-hidden border-r border-neutral-200 bg-white">
<div className="flex-1 overflow-auto p-4">{History}</div>
</aside>
</ResizablePanel>
{/* 右侧预览区域 */}
<main className="h-screen flex-1 overflow-hidden bg-white p-6">
{/*<Outlet />*/}
{Preview}
</main>
</div>
<ResizableHandle />
{/* 页脚 */}
{/*<footer className="h-12 bg-white shadow-inner flex items-center justify-center text-sm text-neutral-600">*/}
{/* © 2025 BiliNote. All rights reserved.*/}
{/*</footer>*/}
{/* 右边预览 */}
<ResizablePanel defaultSize={55} minSize={30}>
<main className="flex h-full flex-col overflow-hidden bg-white p-6">{Preview}</main>
</ResizablePanel>
</ResizablePanelGroup>
</div>
)
}