代码折叠

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
+      <div style={{ position: "relative" }}>
-        ref={ref}
+        <pre
-        style={{ maxHeight: collapsed ? "30vh" : "none", overflow: "hidden" }}
+          ref={ref}
-      >
+          style={{
-        <span
+            maxHeight: collapsed ? "400px" : "none",
-          className="copy-code-button"
+            overflow: "hidden",
-          onClick={() => {
-            if (ref.current) {
-              const code = ref.current.innerText;
-              copyToClipboard(code);
-            }
           }}
-        ></span>
+        >
-        {props.children}
+          <span
-        {showToggle && collapsed && (
+            className="copy-code-button"
-          <p
+            onClick={() => {
-            style={{ margin: 0 }}
+              if (ref.current) {
-            className="show-hide-button"
+                const code = ref.current.innerText;
-            onClick={toggleCollapsed}
+                copyToClipboard(code);
-          >
+              }
-            展开全部
+            }}
-          </p>
+          ></span>
-        )}
+          {props.children}
-      </pre>
+          {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} />
       )}

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%;
+    position: absolute;
-     height: 20px;
+    top: 0;
-     line-height: 20px;
+    width: 100%;
-     position: absolute;
+    margin: auto;
-     text-align: center;
+    height: fit-content;
-     bottom: 0;
+    display: inline-flex;
-     cursor: pointer;
+    justify-content: center;
-     color: white;
+    button{
-     background: linear-gradient(rgba(0,0,0,.3), #1a1b26); 
+      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;