fix css

Author: yini-chen

README.md

@@ -82,6 +82,10 @@ Submit bug reports and feature requests on [our Github repository](https://githu
 
 ## Release Notes
 
+### 0.0.8
+- Fixed some Windows compatibility issues.
+- Optimized the UI interface of webview.
+
 ### 0.0.7
 - Launch experience satisfaction questionnaire survey
 - You are welcome to submit your questions and suggestions on the [experience questionnaire](https://g.alicdn.com/aes/tracker-survey-preview/0.0.13/survey.html?pid=fePxMy&id=3486).

README.zh_CN.md

@@ -91,6 +91,10 @@ Default Language [zh]: zh
 
 ## Release Notes
 
+### 0.0.8
+- Fixed some Windows compatibility issues.
+- Optimized the UI interface of webview.
+
 ### 0.0.7
 
 - Launch experience satisfaction questionnaire survey.

media/src/components/APIPage/API.module.css

@@ -10,11 +10,11 @@
   border: 1px solid rgb(229, 229, 229);
   border-radius: 0 2px 2px 0;
   cursor: pointer;
-  .codicon {
+  /* .codicon {
     position: relative !important;
     line-height: 79px !important;
     right: 3px !important;
-  }
+  } */
   &:hover {
     background-color: #f5f5f5;
   }

media/src/components/APIPage/API.tsx

@@ -128,15 +128,15 @@ export const API: React.FC<APIProps> = (props) => {
 
   const [boxWidth, setBoxWidth] = React.useState(0);
   const [isExpand, setIsExpand] = React.useState(true);
-  React.useEffect(() => {
-    const { width = 0, height = 0 } = resizeObserverEntry?.contentRect || {};
-    if (width !== boxWidth) {
-      if (width < 650) {
-        setIsExpand(false);
-      }
-      setBoxWidth(width);
-    }
-  }, [boxWidth, resizeObserverEntry]);
+  // React.useEffect(() => {
+  //   const { width = 0, height = 0 } = resizeObserverEntry?.contentRect || {};
+  //   if (width !== boxWidth) {
+  //     if (width < 650) {
+  //       setIsExpand(false);
+  //     }
+  //     setBoxWidth(width);
+  //   }
+  // }, [boxWidth, resizeObserverEntry]);
 
   const renderContent = React.useMemo(() => {
     const documentComp = (
@@ -181,9 +181,9 @@ export const API: React.FC<APIProps> = (props) => {
       <div className="flex h-[calc(100vh_-_140px)] bg-white">
         <div className={`expand-arrow ${isExpand ? "" : "!left-1"}`} onClick={() => setIsExpand(!isExpand)}>
           {isExpand ? (
-            <div className="codicon codicon-chevron-left"></div>
+            <div className="codicon codicon-chevron-left relative top-6 right-0.5"></div>
           ) : (
-            <div className="codicon codicon-chevron-right"></div>
+            <div className="codicon codicon-chevron-right relative top-6 right-0.5"></div>
           )}
         </div>
         {isExpand && <div className="w-[25rem]">{isExpand && <APIDebugger></APIDebugger>}</div>}

media/src/components/APIPage/TryAPI/TryAPI.module.css

@@ -2,17 +2,6 @@
   position: relative;
   padding: 16px;
   height: 100%;
-  .ant-btn {
-    margin-left: 8px;
-    padding: 8px;
-    background-color: #f8f9fa;
-    border: 1px #f8f9fa solid;
-  }
-  .ant-btn:hover {
-    background-color: #fff;
-    border: 1px #2f84ae solid;
-    color: #2f84ae;
-  }
 
   .ant-alert {
     margin-bottom: 16px;

media/src/components/APIPage/TryAPI/TryAPI.tsx

@@ -8,7 +8,6 @@ import Editor from "@monaco-editor/react";
 import { Alert, Button, Dropdown, Empty, Spin, message } from "antd";
 import _ from "lodash";
 import React from "react";
-import { apiResponse } from "../../../mocks/openApiResponse";
 import { EditorLanguages } from "../../../types/EditorLanguages";
 import I18N from "../../../utils/I18N";
 import { getEditorMenuItems, parseXml } from "../../utils";
@@ -35,7 +34,7 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
   const { openAPIResponses, isApiResultLoading, version, apiMeta, product, mode } = APIPageContext.useContainer();
   const doc = `${product}::${version}::${apiMeta.name}`;
   const [tab, setTab] = React.useState(TAB_PANES[0].value);
-  const apiResult = openAPIResponses?.[doc] || apiResponse;
+  const apiResult = openAPIResponses?.[doc];
 
   const noShowMonacoEditor = ["byte"];
 
@@ -158,22 +157,22 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
         closable
       />
       {apiResult?.result || isApiResultLoading ? (
-        <div className="api-result">
+        <div className="api-result w-full">
           {isApiResultLoading ? (
             <Spin>
               <span></span>
             </Spin>
           ) : null}
 
           <div className="api-res-header">
-            <div className="title">{I18N.main.explorer.overview}</div>
+            <div className="title mb-4 text-gray-900 text-sm font-medium">{I18N.main.explorer.overview}</div>
             {/* {apiResult?.result || props.isApiResultLoading ? ( */}
-            <div className="res-info">
-              <div className="item">
-                <div className="debug-res">
+            <div className="res-info mb-4 flex">
+              <div className="item mr-6 mx-1 inline-block">
+                <div className="debug-res flex">
                   <div
                     className={`codicon codicon-${
-                      String(statusCode).startsWith("2") ? "pass-filled success" : "error error-red"
+                      String(statusCode).startsWith("2") ? "pass-filled success text-green-600" : "error error-red text-red-700"
                     }`}
                   ></div>
                   <div className="value">
@@ -182,21 +181,21 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
                 </div>
               </div>
               {apiResult && statusCode ? (
-                <div className="item">
+                <div className="item mr-6 mx-1">
                   {/* {httpStatusMessageMap[statusCode] || statusCode} */}
-                  <span className="label">{I18N.main.explorer.statusCode}</span>
+                  <span className="label font-medium mr-1 text-gray-500">{I18N.main.explorer.statusCode}</span>
                   <span
-                    className={`value result-status  ${
-                      String(statusCode).startsWith("2") ? "success" : "error error-red"
+                    className={`value result-status font-medium ${
+                      String(statusCode).startsWith("2") ? "text-green-600 success" : "error error-red text-red-700"
                     }`}
                   >
                     {statusCode}
                   </span>
                 </div>
               ) : null}
               {apiResult ? (
-                <div className="item">
-                  <span className="label">{I18N.main.explorer.time}</span>
+                <div className="item mr-6 mx-1">
+                  <span className="label font-medium mr-1 text-gray-500">{I18N.main.explorer.time}</span>
                   <span className="value">{apiResult.cost}ms</span>
                 </div>
               ) : null}

media/src/components/common/MonacoEditor.scss

@@ -40,3 +40,16 @@
     position: relative;
   }
 }
+.content{
+  .ant-btn {
+    margin-left: 8px;
+    padding: 8px;
+    background-color: #f8f9fa;
+    border: 1px #f8f9fa solid;
+  }
+  .ant-btn:hover {
+    background-color: #fff;
+    border: 1px #2f84ae solid;
+    color: #2f84ae;
+  }
+}