代码折叠

app/components/markdown.tsx

@@ -127,23 +127,25 @@ 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 (
     <>
+      <div style={{ position: "relative" }}>
         <pre
           ref={ref}
-        style={{ maxHeight: collapsed ? "30vh" : "none", overflow: "hidden" }}
+          style={{
+            maxHeight: collapsed ? "400px" : "none",
+            overflow: "hidden",
+          }}
         >
           <span
             className="copy-code-button"
@@ -156,15 +158,19 @@ export function PreCode(props: { children: any }) {
           ></span>
           {props.children}
           {showToggle && collapsed && (
-          <p
+            <div
-            style={{ margin: 0 }}
               className="show-hide-button"
-            onClick={toggleCollapsed}
+              style={{
+                backgroundImage: collapsed
+                  ? "linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.06))"
+                  : "none",
+              }}
             >
-            展开全部
+              <button onClick={toggleCollapsed}>查看全部</button>
-          </p>
+            </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%;
-     height: 20px;
-     line-height: 20px;
     position: absolute;
-     text-align: center;
+    top: 0;
-     bottom: 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: linear-gradient(rgba(0,0,0,.3), #1a1b26); 
+      background: #464e4e;
     } 
   }
 
+}
+
+
+
 .clickable {
   cursor: pointer;