diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index 1531d2ff0..4b90bb705 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -122,9 +122,29 @@ export function PreCode(props: { children: any }) { } }, []); + const [collapsed, setCollapsed] = useState(true); + const [showToggle, setShowToggle] = useState(false); + + useEffect(() => { + if (ref.current) { + // 获取代码块的实际高度 + const screenHeight = window.innerHeight; + const codeHeight = ref.current.scrollHeight; + setShowToggle(codeHeight > screenHeight * 0.3); + } + }, [props.children]); + + const toggleCollapsed = () => { + setCollapsed(!collapsed); + }; + console.log(props.children); + return ( <> -
+      
          {
@@ -135,6 +155,15 @@ export function PreCode(props: { children: any }) {
           }}
         >
         {props.children}
+        {showToggle && collapsed && (
+          

+ 展开全部 +

+ )}
{mermaidCode.length > 0 && ( diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 3c59f2d44..679bac37a 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -272,7 +272,6 @@ div.math { pre { position: relative; - &:hover .copy-code-button { pointer-events: all; transform: translateX(0px); @@ -302,6 +301,17 @@ 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); + } } .clickable {