feat: Supports theme synchronization between webview and vscode. (#135)

* 修复文档排版问题，支持多参数下scrollbar横向滚动 * fix 修复SDK示例操作排版问题 * feat: 支持webview随vscode主题变化 * feat: 优化webview随vscode主题变化的样式 * feat: 优化数据结构文档随vscode主题变化的样式 * fix package.json
aliyun · Aug 27, 2024 · a279675 · a279675
1 parent 8feb28a
commit a279675
Show file tree

Hide file tree

Showing 29 changed files with 4,822 additions and 52,767 deletions.
diff --git a/media/src/components/APIPage/API.module.css b/media/src/components/APIPage/API.module.css
diff --git a/media/src/components/APIPage/API.module.scss b/media/src/components/APIPage/API.module.scss
@@ -0,0 +1,120 @@
+@import "../../styles/variable.scss";
+.debugComp {
+  position: relative;
+  .expand-arrow {
+    position: absolute;
+    top: 256px;
+    left: 396px;
+    z-index: 999;
+    width: 12px;
+    height: 82px;
+    line-height: 36px;
+    background-color: $primary-bg-color;
+    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: $code-bg;
+    }
+  }
+  .next-input.next-focus {
+    background-color: $code-bg;
+  }
+  .next-input {
+    background-color: $primary-bg-color;
+    input {
+      background-color: $primary-bg-color;
+      color: $primary-font-color;
+    }
+    &:hover {
+      background-color: $code-bg;
+    }
+    &:focus {
+      background-color: $code-bg;
+    }
+  }
+  .ant-select-selector {
+    background-color: $primary-bg-color !important;
+    input {
+      background-color: $primary-bg-color !important;
+      color: $primary-font-color !important;
+    }
+  }
+}
+
+.next-menu {
+  background-color: $primary-bg-color !important;
+  .next-menu-item:hover {
+    background-color: $code-bg !important;
+  }
+  .next-menu-item.next-selected {
+    background-color: $code-bg !important;
+  }
+  .next-focused {
+    background-color: $primary-bg-color !important;
+  }
+  .next-disabled {
+    background-color: $primary-bg-color !important;
+    span {
+      color: var(--vscode-badge-background) !important;
+    }
+  }
+}
+.document-segmented {
+  div,
+  span {
+    color: #aaaaaa;
+  }
+  .ant-segmented-item-selected {
+    div,
+    span {
+      color: #4d4d4d;
+      font-weight: 400;
+    }
+  }
+}
+.ant-alert-content {
+  div,
+  span {
+    color: #4d4d4d;
+  }
+}
+.next-overlay-wrapper {
+  .next-balloon {
+    background-color: $primary-bg-color !important;
+  }
+  .next-balloon-normal:after {
+    background-color: $primary-bg-color !important;
+  }
+}
+
+.next-btn-normal {
+  background-color: $primary-bg-color !important;
+}
+.next-btn-primary {
+  background-color: rgb(59, 89, 153) !important;
+  span,
+  div {
+    color: #fff !important;
+  }
+}
+
+.ant-dropdown {
+  span,
+  div {
+    color: #505050 !important;
+  }
+}
+.ant-notification-notice {
+  background-color: $primary-bg-color !important;
+  border: 1px solid $primary-font-color;
+  border-radius: 5px;
+  .ant-notification-notice-message {
+    color: $primary-font-color !important;
+  }
+}
diff --git a/media/src/components/APIPage/API.tsx b/media/src/components/APIPage/API.tsx
@@ -135,23 +135,27 @@ export const API: React.FC<APIProps> = (props) => {
     const documentComp = (
       <div>
         {selectedApi?.description && selectedApi?.description !== selectedApi?.summary ? (
-          <div className="mb-4 bg-white p-4">
+          <div className="mb-4 bg-[var(--vscode-editor-background)] p-4">
             <SemixMarkdown source={selectedApi?.description} />
           </div>
         ) : null}
-        <div className="mb-4 bg-white">
-          <div className="border-t border-gray-100 px-5 py-4 text-base font-medium">请求参数</div>
+        <div className="mb-4 bg-[var(--vscode-editor-background)]">
+          <div className="border-t border-gray-100 px-5 py-4 text-base font-medium text-[var(--vscode-foreground)]">
+            请求参数
+          </div>
           <ApiParamsDoc parameters={selectedApi?.parameters} apiName={selectedApi?.name} schemas={definitions as any} />
         </div>
-        <div className="mb-4 bg-white">
-          <div className="border-t border-gray-100 px-5 py-4 text-base font-medium">出参</div>
+        <div className="mb-4 bg-[var(--vscode-editor-background)]">
+          <div className="border-t border-gray-100 px-5 py-4 text-base font-medium text-[var(--vscode-foreground)]">
+            出参
+          </div>
           <ApiResponseDoc selectedApi={selectedApi}></ApiResponseDoc>
         </div>
         {props.renderMore?.()}
       </div>
     );
     const debugComp = (
-      <div className="debugComp flex h-[calc(100vh_-_140px)] overflow-y-hidden overflow-x-scroll bg-white">
+      <div className="debugComp flex h-[calc(100vh_-_140px)] overflow-y-hidden overflow-x-scroll bg-[var(--vscode-editor-background)]">
         <div className={`expand-arrow ${isExpand ? "" : "!left-1"}`} onClick={() => setIsExpand(!isExpand)}>
           {isExpand ? (
             <div className="codicon codicon-chevron-left relative right-0.5 top-6"></div>
@@ -168,7 +172,7 @@ export const API: React.FC<APIProps> = (props) => {
             }}
           >
             <Tab.Item key="debug-doc" title="API 文档">
-              <div className="grid h-[calc(100vh_-_177px)] w-full bg-white">
+              <div className="grid h-[calc(100vh_-_177px)] w-full bg-[var(--vscode-editor-background)]">
                 <div className="scrollbar-custom overflow-scroll">{documentComp}</div>
               </div>
             </Tab.Item>
@@ -225,7 +229,7 @@ export const API: React.FC<APIProps> = (props) => {
   }, []);
 
   return (
-    <div className="bg-gray-100 pb-4" ref={pageEl}>
+    <div className="bg-[var(--vscode-textBlockQuote-background)] pb-4" ref={pageEl}>
       {/*  */}
       <APIPageContext.Provider
         initialState={{
@@ -240,7 +244,7 @@ export const API: React.FC<APIProps> = (props) => {
         <RootContext.Provider initialState={initValue}>
           {selectedApi ? (
             <>
-              <div className="bg-white p-4">
+              <div className="bg-[var(--vscode-editor-background)] p-4">
                 <div className="flex justify-between">
                   <div>
                     <div className="flex">
@@ -250,23 +254,27 @@ export const API: React.FC<APIProps> = (props) => {
                         </div>
                       ) : null} */}
                       {selectedApi.deprecated ? (
-                        <Tag className="my-auto ml-2">
-                          <span className="text-gray-500">deprecated</span>
+                        <Tag className="my-auto ml-2" color="var(--vscode-textSeparator-foreground)">
+                          <span className="text-[$primary-2-font-color]">deprecated</span>
                         </Tag>
                       ) : null}
-                      <div className="my-auto ml-2 text-base font-medium">
+                      <div className="my-auto ml-2 text-base font-medium text-[var(--vscode-editorWidget-foreground)]">
                         {apiNameEle}
                         {selectedApi?.title ? <span> - {selectedApi.title}</span> : null}
                       </div>
                     </div>
                     {selectedApi?.summary ? (
-                      <div className="ml-2 py-2 text-sm font-normal text-gray-500" style={{ width: "100%" }}>
+                      <div
+                        className="ml-2 py-2 text-sm font-normal  text-[$primary-2-font-color] opacity-70"
+                        style={{ width: "100%" }}
+                      >
                         {selectedApi?.summary}
                       </div>
                     ) : null}
                   </div>
                   <div className="my-auto">
                     <Segmented
+                      className="document-segmented"
                       value={mode}
                       onChange={(val) => changeMode(val)}
                       options={tabs.map((teb) => {

diff --git a/media/src/components/APIPage/APIDebugger/APIGuide.module.scss b/media/src/components/APIPage/APIDebugger/APIGuide.module.scss
@@ -1,3 +1,4 @@
+@import "../../../styles/variable.scss";
 .api-debugger-guide-wrapper {
   .list-item {
     display: block;
@@ -19,7 +20,7 @@
     .name {
       margin-right: 4px;
       // margin-right: 8px;
-      color: #333333;
+      color: $primary-font-color;
       font-weight: 500;
       font-size: 12px;
       font-family: Alibaba-PuHuiTi;
@@ -31,7 +32,8 @@
       max-width: 290px;
       margin-right: 4px;
       overflow: hidden;
-      color: #787878;
+      color: $primary-2-font-color;
+      opacity: 0.7;
       font-size: 12px;
       line-height: 24px;
       white-space: nowrap;
@@ -41,7 +43,7 @@
       cursor: pointer;
     }
     .api-debugger-param-desc {
-      color: #787878;
+      color: $primary-font-color;
     }
   }
 }

diff --git a/media/src/components/APIPage/APIDebugger/widgets/xconsole/JsonEdit.tsx b/media/src/components/APIPage/APIDebugger/widgets/xconsole/JsonEdit.tsx
@@ -6,12 +6,15 @@
 import * as React from "react";
 import { CommonWidgetProps } from "../types";
 import { Editor } from "@monaco-editor/react";
+import { APIPageContext } from "../../../context";
+import { getMonacoTheme } from "../../../../utils";
 
 export class JsonEditProps extends CommonWidgetProps {}
 
 export const JsonEdit: React.FC<JsonEditProps> = (props) => {
   const [curval, setCurval] = React.useState("");
   const [errMsg, setErrMsg] = React.useState("");
+  const { theme } = APIPageContext.useContainer();
   React.useEffect(() => {
     setErrMsg("");
     if (typeof props.value !== "string") {
@@ -35,17 +38,22 @@ export const JsonEdit: React.FC<JsonEditProps> = (props) => {
         }
       }}
     >
-      <div className="editor-content" style={{padding:4,border: "1px #eee solid"}}><Editor
-        height={200}
-        language="json"
-        value={curval || ""}
-        onChange={(value) => {
-          setCurval(value);
-        }}
-        options={{minimap:{
-            enabled:false
-        }}}
-      ></Editor></div>
+      <div className="editor-content" style={{ padding: 4, border: "1px #eee solid" }}>
+        <Editor
+          height={200}
+          theme={getMonacoTheme(theme)}
+          language="json"
+          value={curval || ""}
+          onChange={(value) => {
+            setCurval(value);
+          }}
+          options={{
+            minimap: {
+              enabled: false,
+            },
+          }}
+        ></Editor>
+      </div>
       {errMsg?.length ? <div style={{ color: "red" }}>{errMsg}</div> : null}
     </div>
   );

diff --git a/media/src/components/APIPage/APIDocument/ApiErrorCode.tsx b/media/src/components/APIPage/APIDocument/ApiErrorCode.tsx
@@ -90,9 +90,9 @@ export const ApiErrorCode: React.FC<ApiErrorCodeProps> = (props) => {
   const CustomFixScrollBar = useCustomFixScrollBar(".error-codes-scroll-content", tableRef as any);
 
   return (
-    <div className="mb-4 bg-white">
+    <div className="bg-[var(--vscode-editor-background)]] semix-markdown mb-4">
       <div className="flex justify-between border-t border-gray-100 ">
-        <div className="px-5 py-4 text-base font-medium">错误码</div>
+        <div className="px-5 py-4 text-base font-medium text-[$primary-font-color]">错误码</div>
         <div className="my-auto mr-4 text-sm">
           <a href={`https://api.aliyun.com/document/${props.popcode}/${props.version}/errorCode`} target="_blank">
             所有错误码