Skip to content

Commit 8feb28a

Browse files
yini-chenyini-chen
authored
fix: Fixed Webview layout issues (#134)
* 修复文档排版问题，支持多参数下scrollbar横向滚动 * fix 修复SDK示例操作排版问题 * Update package.json
1 parent 4b3b6c3 commit 8feb28a

File tree

16 files changed

+376
-211
lines changed

16 files changed

+376
-211
lines changed

‎media/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"@types/vscode": "^1.91.0",
4848
"@types/vscode-webview": "^1.57.5",
4949
"@vitejs/plugin-react": "^1.3.2",
50+
"ahooks": "^3.8.1",
5051
"autoprefixer": "^10.0.1",
5152
"eslint": "^8",
5253
"eslint-config-next": "14.2.5",

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

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
1-
.expand-arrow {
2-
position: absolute;
3-
top: 256px;
4-
left: 413px;
5-
z-index: 999;
6-
width: 12px;
7-
height: 82px;
8-
line-height: 36px;
9-
background-color: #fff;
10-
border: 1px solid rgb(229, 229, 229);
11-
border-radius: 0 2px 2px 0;
12-
cursor: pointer;
13-
/* .codicon {
14-
position: relative !important;
15-
line-height: 79px !important;
16-
right: 3px !important;
17-
} */
18-
&:hover {
19-
background-color: #f5f5f5;
1+
.debugComp {
2+
position: relative;
3+
.expand-arrow {
4+
position: absolute;
5+
top: 256px;
6+
left: 396px;
7+
z-index: 999;
8+
width: 12px;
9+
height: 82px;
10+
line-height: 36px;
11+
background-color: #fff;
12+
border: 1px solid rgb(229, 229, 229);
13+
border-radius: 0 2px 2px 0;
14+
cursor: pointer;
15+
/* .codicon {
16+
position: relative !important;
17+
line-height: 79px !important;
18+
right: 3px !important;
19+
} */
20+
&:hover {
21+
background-color: #f5f5f5;
22+
}
2023
}
2124
}

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

Lines changed: 4 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { TryAPI } from "./TryAPI/TryAPI";
2020
import TrySDK from "./TrySDK/TrySDK";
2121
import { APIPageContext } from "./context";
2222
import { PontUIService } from "../../service/UIService";
23+
import ApiResponseDoc from "./APIDocument/ApiResponseDoc";
2324

2425
export class APIProps {
2526
selectedApi?: PontSpec.PontAPI;
@@ -129,15 +130,6 @@ export const API: React.FC<APIProps> = (props) => {
129130

130131
const [boxWidth, setBoxWidth] = React.useState(0);
131132
const [isExpand, setIsExpand] = React.useState(true);
132-
// React.useEffect(() => {
133-
// const { width = 0, height = 0 } = resizeObserverEntry?.contentRect || {};
134-
// if (width !== boxWidth) {
135-
// if (width < 650) {
136-
// setIsExpand(false);
137-
// }
138-
// setBoxWidth(width);
139-
// }
140-
// }, [boxWidth, resizeObserverEntry]);
141133

142134
const renderContent = React.useMemo(() => {
143135
const documentComp = (
@@ -153,54 +145,13 @@ export const API: React.FC<APIProps> = (props) => {
153145
</div>
154146
<div className="mb-4 bg-white">
155147
<div className="border-t border-gray-100 px-5 py-4 text-base font-medium">出参</div>
156-
<div className="px-4 pb-4">
157-
<InnerSchemaTable
158-
name=""
159-
schema={selectedApi?.responses["200"]?.schema as any}
160-
renderExpandIcon={(node, onExpand) => {
161-
return (
162-
<div
163-
className="hover:bg-darken-3 relative flex cursor-pointer items-center justify-center rounded"
164-
style={{
165-
marginLeft: -23.5,
166-
width: 20,
167-
height: 20,
168-
marginRight: 3,
169-
textAlign: "center",
170-
}}
171-
onClick={() => {
172-
onExpand(node);
173-
}}
174-
>
175-
<i
176-
className={node.isExpanded ? "codicon codicon-chevron-down" : "codicon codicon-chevron-right"}
177-
></i>
178-
</div>
179-
);
180-
}}
181-
renderEmpty={() => {
182-
return (
183-
<tr>
184-
<td
185-
colSpan={2}
186-
style={{
187-
padding: "15px 0",
188-
textAlign: "center",
189-
}}
190-
>
191-
无出参定义
192-
</td>
193-
</tr>
194-
);
195-
}}
196-
/>
197-
</div>
148+
<ApiResponseDoc selectedApi={selectedApi}></ApiResponseDoc>
198149
</div>
199150
{props.renderMore?.()}
200151
</div>
201152
);
202153
const debugComp = (
203-
<div className="flex h-[calc(100vh_-_140px)] bg-white">
154+
<div className="debugComp flex h-[calc(100vh_-_140px)] overflow-y-hidden overflow-x-scroll bg-white">
204155
<div className={`expand-arrow ${isExpand ? "" : "!left-1"}`} onClick={() => setIsExpand(!isExpand)}>
205156
{isExpand ? (
206157
<div className="codicon codicon-chevron-left relative right-0.5 top-6"></div>
@@ -218,7 +169,7 @@ export const API: React.FC<APIProps> = (props) => {
218169
>
219170
<Tab.Item key="debug-doc" title="API 文档">
220171
<div className="grid h-[calc(100vh_-_177px)] w-full bg-white">
221-
<div className="overflow-scroll">{documentComp}</div>
172+
<div className="scrollbar-custom overflow-scroll">{documentComp}</div>
222173
</div>
223174
</Tab.Item>
224175
<Tab.Item key="sdk" title="示例代码">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const APIDebugger: React.FC<APIDebuggerProps> = (props) => {
3232
product={product}
3333
></RegionSelector>
3434
</div>
35-
<div className="h-full overflow-y-scroll p-4">
35+
<div className="scrollbar-custom h-full overflow-y-scroll p-4">
3636
<SemixForm
3737
widgets={xconsoleWidgets}
3838
renderTitle={(props) => {

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

Lines changed: 81 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55
import { Table } from "@alicloud/console-components";
66
import * as React from "react";
7+
import useCustomFixScrollBar from "../../common/useCustomFixScrollBar";
78
// import isEmpty from 'lodash/isEmpty'
89

910
export class ApiErrorCodeProps {
@@ -15,90 +16,95 @@ export class ApiErrorCodeProps {
1516
export const ApiErrorCode: React.FC<ApiErrorCodeProps> = (props) => {
1617
const errorCodes = props?.errorCodes;
1718

18-
return React.useMemo(() => {
19-
const dataSource = Object.entries(errorCodes || {})
20-
.map(([key, value]) => {
21-
if (Array.isArray(value)) {
22-
return value.map((v) => ({
23-
...v,
24-
httpCode: key,
25-
}));
26-
}
27-
return {
28-
...(value as any),
19+
const dataSource = Object.entries(errorCodes || {})
20+
.map(([key, value]) => {
21+
if (Array.isArray(value)) {
22+
return value.map((v) => ({
23+
...v,
2924
httpCode: key,
30-
};
31-
})
32-
.flat();
25+
}));
26+
}
27+
return {
28+
...(value as any),
29+
httpCode: key,
30+
};
31+
})
32+
.flat();
3333

34-
const columns = [
35-
{
36-
title: "Http Status Code",
37-
dataIndex: "httpCode",
34+
const columns = [
35+
{
36+
title: "Http Status Code",
37+
dataIndex: "httpCode",
38+
},
39+
{
40+
title: "Error Code",
41+
dataIndex: "errorCode",
42+
cell: (
43+
value:
44+
| string
45+
| number
46+
| boolean
47+
| React.ReactElement<any, string | React.JSXElementConstructor<any>>
48+
| Iterable<React.ReactNode> // import isEmpty from 'lodash/isEmpty'
49+
| React.ReactPortal
50+
| null
51+
| undefined,
52+
index: any,
53+
record: any,
54+
) => {
55+
return <div>{value}</div>;
3856
},
39-
{
40-
title: "Error Code",
41-
dataIndex: "errorCode",
42-
cell: (
43-
value:
44-
| string
45-
| number
46-
| boolean
47-
| React.ReactElement<any, string | React.JSXElementConstructor<any>>
48-
| Iterable<React.ReactNode> // import isEmpty from 'lodash/isEmpty'
49-
| React.ReactPortal
50-
| null
51-
| undefined,
52-
index: any,
53-
record: any,
54-
) => {
55-
return <div>{value}</div>;
56-
},
57+
},
58+
{
59+
title: "Error Message",
60+
dataIndex: "errorMessage",
61+
cell: (value: any, index: any, record: any) => {
62+
return (
63+
<span dangerouslySetInnerHTML={{ __html: value }} style={{ maxWidth: 450, display: "inline-block" }}></span>
64+
);
5765
},
58-
{
59-
title: "Error Message",
60-
dataIndex: "errorMessage",
61-
cell: (value: any, index: any, record: any) => {
62-
return (
63-
<span dangerouslySetInnerHTML={{ __html: value }} style={{ maxWidth: 450, display: "inline-block" }}></span>
64-
);
65-
},
66+
},
67+
{
68+
title: "操作",
69+
dataIndex: "op",
70+
width: 100,
71+
cell: (_: any, index: any, record: { errorCode: any }) => {
72+
return (
73+
<a
74+
target="_blank"
75+
href={`https://api.aliyun.com/troubleshoot?q=${record.errorCode}&product=${props.popcode}&version=${props.version}`}
76+
>
77+
去诊断
78+
</a>
79+
);
6680
},
67-
{
68-
title: "操作",
69-
dataIndex: "op",
70-
width: 100,
71-
cell: (_: any, index: any, record: { errorCode: any }) => {
72-
return (
73-
<a
74-
target="_blank"
75-
href={`https://api.aliyun.com/troubleshoot?q=${record.errorCode}&product=${props.popcode}&version=${props.version}`}
76-
>
77-
去诊断
78-
</a>
79-
);
80-
},
81-
},
82-
];
81+
},
82+
];
83+
84+
const errorCodeTable = (
85+
<Table primaryKey="name" size="small" className="error-code-table" dataSource={dataSource} columns={columns} />
86+
);
8387

84-
const errorCodeTable = (
85-
<Table primaryKey="name" size="small" className="error-code-table" dataSource={dataSource} columns={columns} />
86-
);
88+
const tableRef = React.useRef(null);
8789

88-
return (
89-
<div className="mb-4 bg-white">
90-
<div className="flex justify-between border-t border-gray-100 ">
91-
<div className="px-5 py-4 text-base font-medium">错误码</div>
92-
<div className="my-auto mr-4 text-sm">
93-
<a href={`https://api.aliyun.com/document/${props.popcode}/${props.version}/errorCode`} target="_blank">
94-
所有错误码
95-
</a>
96-
</div>
90+
const CustomFixScrollBar = useCustomFixScrollBar(".error-codes-scroll-content", tableRef as any);
91+
92+
return (
93+
<div className="mb-4 bg-white">
94+
<div className="flex justify-between border-t border-gray-100 ">
95+
<div className="px-5 py-4 text-base font-medium">错误码</div>
96+
<div className="my-auto mr-4 text-sm">
97+
<a href={`https://api.aliyun.com/document/${props.popcode}/${props.version}/errorCode`} target="_blank">
98+
所有错误码
99+
</a>
97100
</div>
98-
<div className="px-4 pb-4">{errorCodeTable}</div>
99101
</div>
100-
);
101-
}, [errorCodes, props.popcode, props.version]);
102+
<div className="error-codes-scroll-content scrollbar-custom overflow-x-scroll px-4 pb-4" ref={tableRef}>
103+
{errorCodeTable}
104+
{CustomFixScrollBar}
105+
</div>
106+
</div>
107+
);
102108
};
103109

104110
ApiErrorCode.defaultProps = new ApiErrorCodeProps();

0 commit comments

Comments
 (0)