Skip to content

Commit

Permalink
修复文档排版问题，支持多参数下scrollbar横向滚动
Browse files Browse the repository at this point in the history
  • Loading branch information
@yini-chen
yini-chen committed Aug 26, 2024
1 parent 3bdd52c commit 200f239
Show file tree
Hide file tree
Showing 14 changed files with 297 additions and 158 deletions.
3 changes: 2 additions & 1 deletion media/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"start": "vite --mode browser",
"build:client": "vite build",
"build:server": "ncc build src/server.ts -o lib -m -e *.css",
"build": "npm run build:client && npm run build:server",
"build": "NODE_ENV=production npm run build:client && npm run build:server",
"preview": "vite preview",
"dev": "next dev"
},
Expand Down 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.1.4",
Expand Down
55 changes: 3 additions & 52 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,48 +145,7 @@ 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>
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();
44 changes: 25 additions & 19 deletions media/src/components/APIPage/APIDocument/ApiParamsDoc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
* @description
*/

import * as PontSpec from 'pontx-spec';
import * as React from 'react';
import { SemixJsonSchema } from 'semix-core';
import { InnerSchemaTable } from 'semix-schema-table';
import { getRefSchema } from '../../utils';
import * as PontSpec from "pontx-spec";
import * as React from "react";
import { SemixJsonSchema } from "semix-core";
import { InnerSchemaTable } from "semix-schema-table";
import { getRefSchema } from "../../utils";
import useCustomFixScrollBar from "../../common/useCustomFixScrollBar";

export class PontxParamsDocProps {
parameters?: PontSpec.Parameter[];
Expand All @@ -18,7 +19,7 @@ export class PontxParamsDocProps {
export const ApiParamsDoc: React.FC<PontxParamsDocProps> = (props) => {
const schema = React.useMemo(() => {
const schema = {
type: 'object',
type: "object",
properties: {},
} as SemixJsonSchema;
if (props.parameters) {
Expand All @@ -45,10 +46,15 @@ export const ApiParamsDoc: React.FC<PontxParamsDocProps> = (props) => {
[props.schemas],
);

return React.useMemo(() => {
return (
<div className="px-4 pb-4">
{props.parameters?.length ? (
const tableRef = React.useRef(null);

const CustomFixScrollBar = useCustomFixScrollBar(".parameters-content", tableRef as any);

return (
<div className="parameters-content scrollbar-custom overflow-x-scroll px-4 pb-4">
{props.parameters?.length ? (
<div ref={tableRef}>
{CustomFixScrollBar}
<InnerSchemaTable
name=""
renderExpandIcon={(node, onExpand) => {
Expand All @@ -60,33 +66,33 @@ export const ApiParamsDoc: React.FC<PontxParamsDocProps> = (props) => {
width: 20,
height: 20,
marginRight: 3,
textAlign: 'center',
textAlign: "center",
}}
onClick={() => {
onExpand(node);
}}
>
<i className={node.isExpanded ? 'codicon codicon-chevron-down' : 'codicon codicon-chevron-right'}></i>
<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 colSpan={2} style={{ padding: "15px 0", textAlign: "center" }}>
无参数定义
</td>
</tr>
);
}}
schema={schema}
/>
) : (
<div style={{ padding: 20, fontSize: 14 }}>调用该 OpenAPI 无需参数。</div>
)}
</div>
);
}, [schema, propSchemaCnt, props.schemas]);
</div>
) : (
<div style={{ padding: 20, fontSize: 14 }}>调用该 OpenAPI 无需参数。</div>
)}
</div>
);
};

ApiParamsDoc.defaultProps = new PontxParamsDocProps();
Loading

0 comments on commit 200f239

Please sign in to comment.