Skip to content

Commit

Permalink
fix: Fixed Webview layout issues (#134)
Browse files Browse the repository at this point in the history 
* 修复文档排版问题，支持多参数下scrollbar横向滚动

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

* Update package.json
  • Loading branch information
@yini-chen
yini-chen committed Aug 27, 2024
1 parent 4b3b6c3 commit 8feb28a
Show file tree
Hide file tree
Showing 16 changed files with 376 additions and 211 deletions.
1 change: 1 addition & 0 deletions media/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"@types/vscode": "^1.91.0",
"@types/vscode-webview": "^1.57.5",
"@vitejs/plugin-react": "^1.3.2",
"ahooks": "^3.8.1",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.2.5",
Expand Down
41 changes: 22 additions & 19 deletions media/src/components/APIPage/API.module.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
57 changes: 4 additions & 53 deletions media/src/components/APIPage/API.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { TryAPI } from "./TryAPI/TryAPI";
import TrySDK from "./TrySDK/TrySDK";
import { APIPageContext } from "./context";
import { PontUIService } from "../../service/UIService";
import ApiResponseDoc from "./APIDocument/ApiResponseDoc";

export class APIProps {
selectedApi?: PontSpec.PontAPI;
Expand Down Expand Up @@ -129,15 +130,6 @@ 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]);

const renderContent = React.useMemo(() => {
const documentComp = (
Expand All @@ -153,54 +145,13 @@ export const API: React.FC<APIProps> = (props) => {
</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="px-4 pb-4">
<InnerSchemaTable
name=""
schema={selectedApi?.responses["200"]?.schema as any}
renderExpandIcon={(node, onExpand) => {
return (
<div
className="hover:bg-darken-3 relative flex cursor-pointer items-center justify-center rounded"
style={{
marginLeft: -23.5,
width: 20,
height: 20,
marginRight: 3,
textAlign: "center",
}}
onClick={() => {
onExpand(node);
}}
>
<i
className={node.isExpanded ? "codicon codicon-chevron-down" : "codicon codicon-chevron-right"}
></i>
</div>
);
}}
renderEmpty={() => {
return (
<tr>
<td
colSpan={2}
style={{
padding: "15px 0",
textAlign: "center",
}}
>
无出参定义
</td>
</tr>
);
}}
/>
</div>
<ApiResponseDoc selectedApi={selectedApi}></ApiResponseDoc>
</div>
{props.renderMore?.()}
</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>
Expand All @@ -218,7 +169,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="overflow-scroll">{documentComp}</div>
<div className="scrollbar-custom overflow-scroll">{documentComp}</div>
</div>
</Tab.Item>
<Tab.Item key="sdk" title="示例代码">
Expand Down
2 changes: 1 addition & 1 deletion media/src/components/APIPage/APIDebugger/APIDebugger.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const APIDebugger: React.FC<APIDebuggerProps> = (props) => {
product={product}
></RegionSelector>
</div>
<div className="h-full overflow-y-scroll p-4">
<div className="scrollbar-custom h-full overflow-y-scroll p-4">
<SemixForm
widgets={xconsoleWidgets}
renderTitle={(props) => {
Expand Down
156 changes: 81 additions & 75 deletions media/src/components/APIPage/APIDocument/ApiErrorCode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/
import { Table } from "@alicloud/console-components";
import * as React from "react";
import useCustomFixScrollBar from "../../common/useCustomFixScrollBar";
// import isEmpty from 'lodash/isEmpty'

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

return React.useMemo(() => {
const dataSource = Object.entries(errorCodes || {})
.map(([key, value]) => {
if (Array.isArray(value)) {
return value.map((v) => ({
...v,
httpCode: key,
}));
}
return {
...(value as any),
const dataSource = Object.entries(errorCodes || {})
.map(([key, value]) => {
if (Array.isArray(value)) {
return value.map((v) => ({
...v,
httpCode: key,
};
})
.flat();
}));
}
return {
...(value as any),
httpCode: key,
};
})
.flat();

const columns = [
{
title: "Http Status Code",
dataIndex: "httpCode",
const columns = [
{
title: "Http Status Code",
dataIndex: "httpCode",
},
{
title: "Error Code",
dataIndex: "errorCode",
cell: (
value:
| string
| number
| boolean
| React.ReactElement<any, string | React.JSXElementConstructor<any>>
| Iterable<React.ReactNode> // import isEmpty from 'lodash/isEmpty'
| React.ReactPortal
| null
| undefined,
index: any,
record: any,
) => {
return <div>{value}</div>;
},
{
title: "Error Code",
dataIndex: "errorCode",
cell: (
value:
| string
| number
| boolean
| React.ReactElement<any, string | React.JSXElementConstructor<any>>
| Iterable<React.ReactNode> // import isEmpty from 'lodash/isEmpty'
| React.ReactPortal
| null
| undefined,
index: any,
record: any,
) => {
return <div>{value}</div>;
},
},
{
title: "Error Message",
dataIndex: "errorMessage",
cell: (value: any, index: any, record: any) => {
return (
<span dangerouslySetInnerHTML={{ __html: value }} style={{ maxWidth: 450, display: "inline-block" }}></span>
);
},
{
title: "Error Message",
dataIndex: "errorMessage",
cell: (value: any, index: any, record: any) => {
return (
<span dangerouslySetInnerHTML={{ __html: value }} style={{ maxWidth: 450, display: "inline-block" }}></span>
);
},
},
{
title: "操作",
dataIndex: "op",
width: 100,
cell: (_: any, index: any, record: { errorCode: any }) => {
return (
<a
target="_blank"
href={`https://api.aliyun.com/troubleshoot?q=${record.errorCode}&product=${props.popcode}&version=${props.version}`}
>
去诊断
</a>
);
},
{
title: "操作",
dataIndex: "op",
width: 100,
cell: (_: any, index: any, record: { errorCode: any }) => {
return (
<a
target="_blank"
href={`https://api.aliyun.com/troubleshoot?q=${record.errorCode}&product=${props.popcode}&version=${props.version}`}
>
去诊断
</a>
);
},
},
];
},
];

const errorCodeTable = (
<Table primaryKey="name" size="small" className="error-code-table" dataSource={dataSource} columns={columns} />
);

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

return (
<div className="mb-4 bg-white">
<div className="flex justify-between border-t border-gray-100 ">
<div className="px-5 py-4 text-base font-medium">错误码</div>
<div className="my-auto mr-4 text-sm">
<a href={`https://api.aliyun.com/document/${props.popcode}/${props.version}/errorCode`} target="_blank">
所有错误码
</a>
</div>
const CustomFixScrollBar = useCustomFixScrollBar(".error-codes-scroll-content", tableRef as any);

return (
<div className="mb-4 bg-white">
<div className="flex justify-between border-t border-gray-100 ">
<div className="px-5 py-4 text-base font-medium">错误码</div>
<div className="my-auto mr-4 text-sm">
<a href={`https://api.aliyun.com/document/${props.popcode}/${props.version}/errorCode`} target="_blank">
所有错误码
</a>
</div>
<div className="px-4 pb-4">{errorCodeTable}</div>
</div>
);
}, [errorCodes, props.popcode, props.version]);
<div className="error-codes-scroll-content scrollbar-custom overflow-x-scroll px-4 pb-4" ref={tableRef}>
{errorCodeTable}
{CustomFixScrollBar}
</div>
</div>
);
};

ApiErrorCode.defaultProps = new ApiErrorCodeProps();
Loading

0 comments on commit 8feb28a

Please sign in to comment.