Skip to content

Commit a279675

Browse files
yini-chenyini-chen
authored
feat: Supports theme synchronization between webview and vscode. (#135)
* 修复文档排版问题，支持多参数下scrollbar横向滚动 * fix 修复SDK示例操作排版问题 * feat: 支持webview随vscode主题变化 * feat: 优化webview随vscode主题变化的样式 * feat: 优化数据结构文档随vscode主题变化的样式 * fix package.json
1 parent 8feb28a commit a279675

29 files changed

+4822
-52767
lines changed

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

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎media/src/components/APIPage/API.module.scss

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
@import "../../styles/variable.scss";
2+
.debugComp {
3+
position: relative;
4+
.expand-arrow {
5+
position: absolute;
6+
top: 256px;
7+
left: 396px;
8+
z-index: 999;
9+
width: 12px;
10+
height: 82px;
11+
line-height: 36px;
12+
background-color: $primary-bg-color;
13+
border: 1px solid rgb(229, 229, 229);
14+
border-radius: 0 2px 2px 0;
15+
cursor: pointer;
16+
/* .codicon {
17+
position: relative !important;
18+
line-height: 79px !important;
19+
right: 3px !important;
20+
} */
21+
&:hover {
22+
background-color: $code-bg;
23+
}
24+
}
25+
.next-input.next-focus {
26+
background-color: $code-bg;
27+
}
28+
.next-input {
29+
background-color: $primary-bg-color;
30+
input {
31+
background-color: $primary-bg-color;
32+
color: $primary-font-color;
33+
}
34+
&:hover {
35+
background-color: $code-bg;
36+
}
37+
&:focus {
38+
background-color: $code-bg;
39+
}
40+
}
41+
.ant-select-selector {
42+
background-color: $primary-bg-color !important;
43+
input {
44+
background-color: $primary-bg-color !important;
45+
color: $primary-font-color !important;
46+
}
47+
}
48+
}
49+
50+
.next-menu {
51+
background-color: $primary-bg-color !important;
52+
.next-menu-item:hover {
53+
background-color: $code-bg !important;
54+
}
55+
.next-menu-item.next-selected {
56+
background-color: $code-bg !important;
57+
}
58+
.next-focused {
59+
background-color: $primary-bg-color !important;
60+
}
61+
.next-disabled {
62+
background-color: $primary-bg-color !important;
63+
span {
64+
color: var(--vscode-badge-background) !important;
65+
}
66+
}
67+
}
68+
.document-segmented {
69+
div,
70+
span {
71+
color: #aaaaaa;
72+
}
73+
.ant-segmented-item-selected {
74+
div,
75+
span {
76+
color: #4d4d4d;
77+
font-weight: 400;
78+
}
79+
}
80+
}
81+
.ant-alert-content {
82+
div,
83+
span {
84+
color: #4d4d4d;
85+
}
86+
}
87+
.next-overlay-wrapper {
88+
.next-balloon {
89+
background-color: $primary-bg-color !important;
90+
}
91+
.next-balloon-normal:after {
92+
background-color: $primary-bg-color !important;
93+
}
94+
}
95+
96+
.next-btn-normal {
97+
background-color: $primary-bg-color !important;
98+
}
99+
.next-btn-primary {
100+
background-color: rgb(59, 89, 153) !important;
101+
span,
102+
div {
103+
color: #fff !important;
104+
}
105+
}
106+
107+
.ant-dropdown {
108+
span,
109+
div {
110+
color: #505050 !important;
111+
}
112+
}
113+
.ant-notification-notice {
114+
background-color: $primary-bg-color !important;
115+
border: 1px solid $primary-font-color;
116+
border-radius: 5px;
117+
.ant-notification-notice-message {
118+
color: $primary-font-color !important;
119+
}
120+
}

‎media/src/components/APIPage/API.tsx

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -135,23 +135,27 @@ export const API: React.FC<APIProps> = (props) => {
135135
const documentComp = (
136136
<div>
137137
{selectedApi?.description && selectedApi?.description !== selectedApi?.summary ? (
138-
<div className="mb-4 bg-white p-4">
138+
<div className="mb-4 bg-[var(--vscode-editor-background)] p-4">
139139
<SemixMarkdown source={selectedApi?.description} />
140140
</div>
141141
) : null}
142-
<div className="mb-4 bg-white">
143-
<div className="border-t border-gray-100 px-5 py-4 text-base font-medium">请求参数</div>
142+
<div className="mb-4 bg-[var(--vscode-editor-background)]">
143+
<div className="border-t border-gray-100 px-5 py-4 text-base font-medium text-[var(--vscode-foreground)]">
144+
请求参数
145+
</div>
144146
<ApiParamsDoc parameters={selectedApi?.parameters} apiName={selectedApi?.name} schemas={definitions as any} />
145147
</div>
146-
<div className="mb-4 bg-white">
147-
<div className="border-t border-gray-100 px-5 py-4 text-base font-medium">出参</div>
148+
<div className="mb-4 bg-[var(--vscode-editor-background)]">
149+
<div className="border-t border-gray-100 px-5 py-4 text-base font-medium text-[var(--vscode-foreground)]">
150+
出参
151+
</div>
148152
<ApiResponseDoc selectedApi={selectedApi}></ApiResponseDoc>
149153
</div>
150154
{props.renderMore?.()}
151155
</div>
152156
);
153157
const debugComp = (
154-
<div className="debugComp flex h-[calc(100vh_-_140px)] overflow-y-hidden overflow-x-scroll bg-white">
158+
<div className="debugComp flex h-[calc(100vh_-_140px)] overflow-y-hidden overflow-x-scroll bg-[var(--vscode-editor-background)]">
155159
<div className={`expand-arrow ${isExpand ? "" : "!left-1"}`} onClick={() => setIsExpand(!isExpand)}>
156160
{isExpand ? (
157161
<div className="codicon codicon-chevron-left relative right-0.5 top-6"></div>
@@ -168,7 +172,7 @@ export const API: React.FC<APIProps> = (props) => {
168172
}}
169173
>
170174
<Tab.Item key="debug-doc" title="API 文档">
171-
<div className="grid h-[calc(100vh_-_177px)] w-full bg-white">
175+
<div className="grid h-[calc(100vh_-_177px)] w-full bg-[var(--vscode-editor-background)]">
172176
<div className="scrollbar-custom overflow-scroll">{documentComp}</div>
173177
</div>
174178
</Tab.Item>
@@ -225,7 +229,7 @@ export const API: React.FC<APIProps> = (props) => {
225229
}, []);
226230

227231
return (
228-
<div className="bg-gray-100 pb-4" ref={pageEl}>
232+
<div className="bg-[var(--vscode-textBlockQuote-background)] pb-4" ref={pageEl}>
229233
{/* */}
230234
<APIPageContext.Provider
231235
initialState={{
@@ -240,7 +244,7 @@ export const API: React.FC<APIProps> = (props) => {
240244
<RootContext.Provider initialState={initValue}>
241245
{selectedApi ? (
242246
<>
243-
<div className="bg-white p-4">
247+
<div className="bg-[var(--vscode-editor-background)] p-4">
244248
<div className="flex justify-between">
245249
<div>
246250
<div className="flex">
@@ -250,23 +254,27 @@ export const API: React.FC<APIProps> = (props) => {
250254
</div>
251255
) : null} */}
252256
{selectedApi.deprecated ? (
253-
<Tag className="my-auto ml-2">
254-
<span className="text-gray-500">deprecated</span>
257+
<Tag className="my-auto ml-2" color="var(--vscode-textSeparator-foreground)">
258+
<span className="text-[$primary-2-font-color]">deprecated</span>
255259
</Tag>
256260
) : null}
257-
<div className="my-auto ml-2 text-base font-medium">
261+
<div className="my-auto ml-2 text-base font-medium text-[var(--vscode-editorWidget-foreground)]">
258262
{apiNameEle}
259263
{selectedApi?.title ? <span> - {selectedApi.title}</span> : null}
260264
</div>
261265
</div>
262266
{selectedApi?.summary ? (
263-
<div className="ml-2 py-2 text-sm font-normal text-gray-500" style={{ width: "100%" }}>
267+
<div
268+
className="ml-2 py-2 text-sm font-normal text-[$primary-2-font-color] opacity-70"
269+
style={{ width: "100%" }}
270+
>
264271
{selectedApi?.summary}
265272
</div>
266273
) : null}
267274
</div>
268275
<div className="my-auto">
269276
<Segmented
277+
className="document-segmented"
270278
value={mode}
271279
onChange={(val) => changeMode(val)}
272280
options={tabs.map((teb) => {

‎media/src/components/APIPage/APIDebugger/APIGuide.module.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "../../../styles/variable.scss";
12
.api-debugger-guide-wrapper {
23
.list-item {
34
display: block;
@@ -19,7 +20,7 @@
1920
.name {
2021
margin-right: 4px;
2122
// margin-right: 8px;
22-
color: #333333;
23+
color: $primary-font-color;
2324
font-weight: 500;
2425
font-size: 12px;
2526
font-family: Alibaba-PuHuiTi;
@@ -31,7 +32,8 @@
3132
max-width: 290px;
3233
margin-right: 4px;
3334
overflow: hidden;
34-
color: #787878;
35+
color: $primary-2-font-color;
36+
opacity: 0.7;
3537
font-size: 12px;
3638
line-height: 24px;
3739
white-space: nowrap;
@@ -41,7 +43,7 @@
4143
cursor: pointer;
4244
}
4345
.api-debugger-param-desc {
44-
color: #787878;
46+
color: $primary-font-color;
4547
}
4648
}
4749
}

‎media/src/components/APIPage/APIDebugger/widgets/xconsole/JsonEdit.tsx

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,15 @@
66
import * as React from "react";
77
import { CommonWidgetProps } from "../types";
88
import { Editor } from "@monaco-editor/react";
9+
import { APIPageContext } from "../../../context";
10+
import { getMonacoTheme } from "../../../../utils";
911

1012
export class JsonEditProps extends CommonWidgetProps {}
1113

1214
export const JsonEdit: React.FC<JsonEditProps> = (props) => {
1315
const [curval, setCurval] = React.useState("");
1416
const [errMsg, setErrMsg] = React.useState("");
17+
const { theme } = APIPageContext.useContainer();
1518
React.useEffect(() => {
1619
setErrMsg("");
1720
if (typeof props.value !== "string") {
@@ -35,17 +38,22 @@ export const JsonEdit: React.FC<JsonEditProps> = (props) => {
3538
}
3639
}}
3740
>
38-
<div className="editor-content" style={{padding:4,border: "1px #eee solid"}}><Editor
39-
height={200}
40-
language="json"
41-
value={curval || ""}
42-
onChange={(value) => {
43-
setCurval(value);
44-
}}
45-
options={{minimap:{
46-
enabled:false
47-
}}}
48-
></Editor></div>
41+
<div className="editor-content" style={{ padding: 4, border: "1px #eee solid" }}>
42+
<Editor
43+
height={200}
44+
theme={getMonacoTheme(theme)}
45+
language="json"
46+
value={curval || ""}
47+
onChange={(value) => {
48+
setCurval(value);
49+
}}
50+
options={{
51+
minimap: {
52+
enabled: false,
53+
},
54+
}}
55+
></Editor>
56+
</div>
4957
{errMsg?.length ? <div style={{ color: "red" }}>{errMsg}</div> : null}
5058
</div>
5159
);

‎media/src/components/APIPage/APIDocument/ApiErrorCode.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@ export const ApiErrorCode: React.FC<ApiErrorCodeProps> = (props) => {
9090
const CustomFixScrollBar = useCustomFixScrollBar(".error-codes-scroll-content", tableRef as any);
9191

9292
return (
93-
<div className="mb-4 bg-white">
93+
<div className="bg-[var(--vscode-editor-background)]] semix-markdown mb-4">
9494
<div className="flex justify-between border-t border-gray-100 ">
95-
<div className="px-5 py-4 text-base font-medium">错误码</div>
95+
<div className="px-5 py-4 text-base font-medium text-[$primary-font-color]">错误码</div>
9696
<div className="my-auto mr-4 text-sm">
9797
<a href={`https://api.aliyun.com/document/${props.popcode}/${props.version}/errorCode`} target="_blank">
9898
所有错误码

0 commit comments

Comments
 (0)