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

Compare commits

base: hypercross:a7477666c7cf810b679f6470dfe93cf64c99b5cf
Branches Tags
hypercross:master
..
compare: hypercross:028074e4f1c3762e18a9ffba0c0f5c4ca625898d
Branches Tags
hypercross:master

No commits in common. "a7477666c7cf810b679f6470dfe93cf64c99b5cf" and "028074e4f1c3762e18a9ffba0c0f5c4ca625898d" have entirely different histories.
a7477666c7 ... 028074e4f1

2 changed files with 8 additions and 21 deletions
Show Stats Expand all files Collapse all files

25
src/components/FileTree.tsx
View File

@ -83,17 +83,9 @@ export const HeadingNode: Component<{
const navigate = useNavigate(); const navigate = useNavigate();
const anchor = props.node.id || ""; const anchor = props.node.id || "";
const href = `${props.basePath}#${anchor}`; const href = `${props.basePath}#${anchor}`;
const hasChildren = !!props.node.children;
// 默认收起，除非当前锚点在该节点内
const [isExpanded, setIsExpanded] = createSignal(props.depth <= 0);
const handleExpand = (e: MouseEvent) => {
e.preventDefault();
if (hasChildren) {
setIsExpanded(!isExpanded());
}
};
const handleClick = (e: MouseEvent) => { const handleClick = (e: MouseEvent) => {
e.preventDefault();
navigate(href); navigate(href);
// 滚动到目标元素，考虑导航栏高度偏移 // 滚动到目标元素，考虑导航栏高度偏移
requestAnimationFrame(() => { requestAnimationFrame(() => {
@ -102,7 +94,7 @@ export const HeadingNode: Component<{
const navBarHeight = 80; const navBarHeight = 80;
const elementPosition = element.getBoundingClientRect().top; const elementPosition = element.getBoundingClientRect().top;
const offsetPosition = window.scrollY + elementPosition - navBarHeight; const offsetPosition = window.scrollY + elementPosition - navBarHeight;
window.scrollTo({ top: offsetPosition, behavior: "instant" }); window.scrollTo({ top: offsetPosition, behavior: "smooth" });
} }
}); });
}; };
@ -111,20 +103,15 @@ export const HeadingNode: Component<{
return ( return (
<div> <div>
<span class={`${hasChildren ? "" : "invisible" } ${isExpanded() ? "rotate-90" : ""} inline-block transition-transform cursor-pointer mr-1 text-gray-400 text-xs w-3 flex-shrink-0`}
style={{ "margin-left": `${indent + 8}px` }}
onClick={handleExpand}
>
▶
</span>
<a <a
href={href} href={href}
class="inline-flex items-center py-0.5 px-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded truncate cursor-pointer" class="block py-0.5 px-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded truncate"
style={{ "padding-left": `${indent + 8}px` }}
onClick={handleClick} onClick={handleClick}
> >
<span class="truncate">{props.node.title}</span> {props.node.title}
</a> </a>
<Show when={hasChildren && isExpanded()}> <Show when={props.node.children}>
<div> <div>
{props.node.children!.map((child) => ( {props.node.children!.map((child) => (
<HeadingNode <HeadingNode

4
src/components/Sidebar.tsx
View File

@ -30,7 +30,7 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
return ( return (
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<div class="p-4 border-b border-b-gray-200"> <div class="p-4 border-b">
<div class="flex items-center justify-between"> <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}>
@ -63,7 +63,7 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
{/* 当前文件标题滚动区域 */} {/* 当前文件标题滚动区域 */}
<Show when={currentFileHeadings().length > 0}> <Show when={currentFileHeadings().length > 0}>
<div class="flex-1 border-t-gray-200 border-t overflow-y-auto p-4 min-h-0"> <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>