mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-06 05:04:22 +00:00
56c9c0719f
Step 3 of the planned vue->react migration. The five api-docs files
(ApiDocsPage, CodeBlock, EndpointRow, EndpointSection, plus the
data-only endpoints.js) all move to react+ts.
Also introduces components/AppSidebar.tsx — api-docs is the first
authenticated page to need it. AppSidebar.vue stays in place for the
six remaining vue entries (settings, inbounds, clients, xray, nodes,
index); each gets switched to AppSidebar.tsx as its entry migrates.
After the last entry flips, AppSidebar.vue is deleted.
Notable transformations:
* The scroll observer that highlights the active TOC link is a
useEffect keyed on sections — re-registers whenever the visible
set changes (search filter narrows it). Same behaviour as the vue
watchEffect.
* v-html="safeInlineHtml(...)" becomes
dangerouslySetInnerHTML={{ __html: safeInlineHtml(...) }}. The
helper still escapes everything except <code> tags.
* JSON syntax highlighter in CodeBlock is unchanged — pure regex on
the escaped string, then rendered via dangerouslySetInnerHTML.
* endpoints.js stays as JS (allowJs in tsconfig); only the consumer
signatures (Endpoint, Section) are typed at the React boundary.
* AppSidebar reuses pauseAnimationsUntilLeave + useTheme from
step 1. Drawer + Sider keyed off the same localStorage flag
(isSidebarCollapsed) and DOM theme attributes the vue version
uses, so the two stay in sync during coexistence.
90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
import type { ComponentType } from 'react';
|
|
import { Table } from 'antd';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
import { DownOutlined, RightOutlined } from '@ant-design/icons';
|
|
import EndpointRow from './EndpointRow';
|
|
import type { Endpoint } from './EndpointRow';
|
|
import { safeInlineHtml } from './endpoints.js';
|
|
import './EndpointSection.css';
|
|
|
|
interface SubHeader {
|
|
name: string;
|
|
desc?: string;
|
|
}
|
|
|
|
export interface Section {
|
|
id: string;
|
|
title: string;
|
|
description?: string;
|
|
endpoints: Endpoint[];
|
|
subHeader?: SubHeader[];
|
|
}
|
|
|
|
interface EndpointSectionProps {
|
|
section: Section;
|
|
icon?: ComponentType<{ className?: string }> | null;
|
|
collapsed?: boolean;
|
|
onToggle?: () => void;
|
|
}
|
|
|
|
const subHeaderColumns: ColumnsType<SubHeader> = [
|
|
{ title: 'Header', dataIndex: 'name', key: 'name', width: 240 },
|
|
{
|
|
title: 'Description',
|
|
dataIndex: 'desc',
|
|
key: 'desc',
|
|
render: (value: string) => (
|
|
<span dangerouslySetInnerHTML={{ __html: safeInlineHtml(value || '') }} />
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function EndpointSection({
|
|
section,
|
|
icon: Icon = null,
|
|
collapsed = false,
|
|
onToggle,
|
|
}: EndpointSectionProps) {
|
|
const endpointLabel = section.endpoints.length === 1
|
|
? '1 endpoint'
|
|
: `${section.endpoints.length} endpoints`;
|
|
|
|
return (
|
|
<section id={section.id} className="api-section">
|
|
<div className="section-header" onClick={onToggle}>
|
|
<div className="section-header-left">
|
|
{collapsed ? <RightOutlined className="collapse-icon" /> : <DownOutlined className="collapse-icon" />}
|
|
{Icon && <Icon className="section-icon" />}
|
|
<h2 className="section-title">{section.title}</h2>
|
|
</div>
|
|
<span className="endpoint-count">{endpointLabel}</span>
|
|
</div>
|
|
|
|
{section.description && !collapsed && (
|
|
<p
|
|
className="section-description"
|
|
dangerouslySetInnerHTML={{ __html: safeInlineHtml(section.description) }}
|
|
/>
|
|
)}
|
|
|
|
{section.subHeader && !collapsed && (
|
|
<div className="sub-header-block">
|
|
<div className="section-block-label">Response headers</div>
|
|
<Table
|
|
columns={subHeaderColumns}
|
|
dataSource={section.subHeader}
|
|
pagination={false}
|
|
size="small"
|
|
rowKey="name"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="endpoints" style={{ display: collapsed ? 'none' : undefined }}>
|
|
{section.endpoints.map((endpoint, idx) => (
|
|
<EndpointRow key={idx} endpoint={endpoint} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|