diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index 4b90bb705..e011bd5f5 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -127,44 +127,50 @@ export function PreCode(props: { children: any }) { useEffect(() => { if (ref.current) { - // 获取代码块的实际高度 - const screenHeight = window.innerHeight; const codeHeight = ref.current.scrollHeight; - setShowToggle(codeHeight > screenHeight * 0.3); + setShowToggle(codeHeight > 400); + ref.current.scrollTop = ref.current.scrollHeight; } }, [props.children]); const toggleCollapsed = () => { setCollapsed(!collapsed); }; - console.log(props.children); return ( <> - <pre - ref={ref} - style={{ maxHeight: collapsed ? "30vh" : "none", overflow: "hidden" }} - > - <span - className="copy-code-button" - onClick={() => { - if (ref.current) { - const code = ref.current.innerText; - copyToClipboard(code); - } + <div style={{ position: "relative" }}> + <pre + ref={ref} + style={{ + maxHeight: collapsed ? "400px" : "none", + overflow: "hidden", }} - ></span> - {props.children} - {showToggle && collapsed && ( - <p - style={{ margin: 0 }} - className="show-hide-button" - onClick={toggleCollapsed} - > - 展开全部 - </p> - )} - </pre> + > + <span + className="copy-code-button" + onClick={() => { + if (ref.current) { + const code = ref.current.innerText; + copyToClipboard(code); + } + }} + ></span> + {props.children} + {showToggle && collapsed && ( + <div + className="show-hide-button" + style={{ + backgroundImage: collapsed + ? "linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.06))" + : "none", + }} + > + <button onClick={toggleCollapsed}>查看全部</button> + </div> + )} + </pre> + </div> {mermaidCode.length > 0 && ( <Mermaid code={mermaidCode} key={mermaidCode} /> )} diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 679bac37a..14075a0a8 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -271,7 +271,7 @@ div.math { } pre { - position: relative; + // position: relative; &:hover .copy-code-button { pointer-events: all; transform: translateX(0px); @@ -301,19 +301,32 @@ pre { opacity: 1; } } + .show-hide-button { - width: 100%; - height: 20px; - line-height: 20px; - position: absolute; - text-align: center; - bottom: 0; - cursor: pointer; - color: white; - background: linear-gradient(rgba(0,0,0,.3), #1a1b26); + position: absolute; + top: 0; + width: 100%; + margin: auto; + height: fit-content; + display: inline-flex; + justify-content: center; + button{ + margin-top: 3em; + margin-bottom: 4em; + padding: 5px 16px; + border: 0; + cursor: pointer; + border-radius: 14px; + text-align: center; + color: white; + background: #464e4e; + } } + } + + .clickable { cursor: pointer;