fix 修复SDK示例操作排版问题

aliyun · Aug 26, 2024 · 9141701 · 9141701
1 parent 200f239
commit 9141701
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 54 deletions.
diff --git a/media/src/components/APIPage/API.module.css b/media/src/components/APIPage/API.module.css
@@ -1,21 +1,24 @@
-.expand-arrow {
-  position: absolute;
-  top: 256px;
-  left: 413px;
-  z-index: 999;
-  width: 12px;
-  height: 82px;
-  line-height: 36px;
-  background-color: #fff;
-  border: 1px solid rgb(229, 229, 229);
-  border-radius: 0 2px 2px 0;
-  cursor: pointer;
-  /* .codicon {
-    position: relative !important;
-    line-height: 79px !important;
-    right: 3px !important;
-  } */
-  &:hover {
-    background-color: #f5f5f5;
+.debugComp {
+  position: relative;
+  .expand-arrow {
+    position: absolute;
+    top: 256px;
+    left: 396px;
+    z-index: 999;
+    width: 12px;
+    height: 82px;
+    line-height: 36px;
+    background-color: #fff;
+    border: 1px solid rgb(229, 229, 229);
+    border-radius: 0 2px 2px 0;
+    cursor: pointer;
+    /* .codicon {
+      position: relative !important;
+      line-height: 79px !important;
+      right: 3px !important;
+    } */
+    &:hover {
+      background-color: #f5f5f5;
+    }
   }
 }
diff --git a/media/src/components/APIPage/API.tsx b/media/src/components/APIPage/API.tsx
@@ -151,7 +151,7 @@ export const API: React.FC<APIProps> = (props) => {
       </div>
     );
     const debugComp = (
-      <div className="flex h-[calc(100vh_-_140px)] bg-white">
+      <div className="debugComp flex h-[calc(100vh_-_140px)] overflow-y-hidden overflow-x-scroll bg-white">
         <div className={`expand-arrow ${isExpand ? "" : "!left-1"}`} onClick={() => setIsExpand(!isExpand)}>
           {isExpand ? (
             <div className="codicon codicon-chevron-left relative right-0.5 top-6"></div>

diff --git a/media/src/components/common/MonacoEditor.tsx b/media/src/components/common/MonacoEditor.tsx
@@ -4,7 +4,7 @@
  */
 import { Balloon } from "@alicloud/console-components";
 import { Editor } from "@monaco-editor/react";
-import { Button, message } from "antd";
+import { Button, Dropdown, message } from "antd";
 import React, { ReactNode } from "react";
 import { PontUIService } from "../../service/UIService";
 import { DARA_SDK_LANGUAGES, LanguageSwitcher } from "../APIPage/TrySDK/LanguageSwitcher";
@@ -71,9 +71,35 @@ export const MonacoEditor: React.FC<MonacoEditorProps> = (props) => {
     ) : null;
   }, [languageTab, value]);
 
+  const divRef = React.useRef(null);
+  const [width, setWidth] = React.useState(0);
+
+  React.useEffect(() => {
+    const handleResize = (entries) => {
+      for (let entry of entries) {
+        setWidth(entry.contentRect.width);
+      }
+    };
+
+    const observer = new ResizeObserver(handleResize);
+
+    if (divRef.current) {
+      observer.observe(divRef.current);
+    }
+
+    // Clean up observer on unmount
+    return () => {
+      if (divRef.current) {
+        observer.unobserve(divRef.current);
+      }
+    };
+  }, []);
+
+  console.log(width);
+
   return (
     <div className="editor-content">
-      <div className="operations">
+      <div className="operations" ref={divRef}>
         <div className="left-area">
           {languageSelector ? (
             <LanguageSwitcher
@@ -89,7 +115,7 @@ export const MonacoEditor: React.FC<MonacoEditorProps> = (props) => {
           ) : null}
           {header || null}
         </div>
-        <div className="right-area">
+        <div className="right-area ml-2">
           {copyable ? (
             <Balloon
               closable={false}
@@ -113,39 +139,36 @@ export const MonacoEditor: React.FC<MonacoEditorProps> = (props) => {
           ) : null}
           {items?.length ? (
             <div className="menu-icon">
-              {/* <Dropdown menu={{ items }}>
-                <Button onClick={(e) => e.preventDefault()}>
-                  <div className="codicon codicon-list-selection" />
-                </Button>
-              </Dropdown> */}
-              {items?.map((item) => {
-                return (
-                  <Balloon
-                    closable={false}
-                    align="t"
-                    trigger={
-                      <Button
-                        // className="copy-button"
-                        href={item.externalLink ? item.externalLink : ""}
-                        target="_blank"
-                        onClick={item.onClick}
-                      >
-                        <div className={`codicon codicon-${item.codicon}`} />
-                      </Button>
-                    }
-                  >
-                    {item.label}
-                  </Balloon>
-                );
-              })}
-              {/* {(window as any).vscode ? (
-                <Dropdown menu={{ items: menuItems }}>
-                  <a onClick={(e) => e.preventDefault()}>
-                    fff
+              {width < 400 ? (
+                <Dropdown menu={{ items }}>
+                  <Button onClick={(e) => e.preventDefault()}>
                     <div className="codicon codicon-list-selection" />
-                  </a>
+                  </Button>
                 </Dropdown>
-              ) : null} */}
+              ) : (
+                <>
+                  {items?.map((item) => {
+                    return (
+                      <Balloon
+                        closable={false}
+                        align="t"
+                        trigger={
+                          <Button
+                            // className="copy-button"
+                            href={item.externalLink ? item.externalLink : ""}
+                            target="_blank"
+                            onClick={item.onClick}
+                          >
+                            <div className={`codicon codicon-${item.codicon}`} />
+                          </Button>
+                        }
+                      >
+                        {item.label}
+                      </Balloon>
+                    );
+                  })}
+                </>
+              )}
             </div>
           ) : null}
         </div>