mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-06 21:24:10 +00:00
refactor(frontend): port api-docs to react+ts
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.
This commit is contained in:
MHSanaei
parent
0116adcd85
commit
56c9c0719f
15 changed files with 1387 additions and 887 deletions
|
|
@ -8,6 +8,6 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="message"></div>
|
<div id="message"></div>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/entries/api-docs.js"></script>
|
<script type="module" src="/src/entries/api-docs.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
225
frontend/src/components/AppSidebar.css
Normal file
225
frontend/src/components/AppSidebar.css
Normal file
|
|
@ -0,0 +1,225 @@
|
||||||
|
.ant-sidebar > .ant-layout-sider {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider-brand,
|
||||||
|
.drawer-brand {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
color: rgba(0, 0, 0, 0.88);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider-brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 14px 14px;
|
||||||
|
border-bottom: 1px solid rgba(128, 128, 128, 0.15);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider-brand-collapsed {
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 14px 4px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-text {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider-brand-collapsed .brand-text {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-theme-cycle {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(0, 0, 0, 0.75);
|
||||||
|
padding: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: background-color 0.2s, transform 0.15s, color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-theme-cycle:hover,
|
||||||
|
.sidebar-theme-cycle:focus-visible {
|
||||||
|
background-color: rgba(64, 150, 255, 0.1);
|
||||||
|
color: #4096ff;
|
||||||
|
transform: scale(1.08);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-theme-cycle svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-header-actions {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-handle {
|
||||||
|
position: fixed;
|
||||||
|
top: 12px;
|
||||||
|
left: 12px;
|
||||||
|
z-index: 1100;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-bottom: 1px solid rgba(128, 128, 128, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-close {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-close:hover,
|
||||||
|
.drawer-close:focus-visible {
|
||||||
|
background: rgba(128, 128, 128, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-menu .ant-menu-item {
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-menu .ant-menu-item .anticon {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-utility {
|
||||||
|
margin-top: auto;
|
||||||
|
border-top: 1px solid rgba(128, 128, 128, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-sidebar > .ant-layout-sider .ant-layout-sider-children {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider-nav {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider-utility {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border-top: 1px solid rgba(128, 128, 128, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.drawer-handle {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-sidebar > .ant-layout-sider .ant-layout-sider-children,
|
||||||
|
.ant-sidebar > .ant-layout-sider .ant-layout-sider-trigger {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-sidebar > .ant-layout-sider {
|
||||||
|
flex: 0 0 0 !important;
|
||||||
|
max-width: 0 !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .drawer-brand,
|
||||||
|
body.dark .sider-brand {
|
||||||
|
color: rgba(255, 255, 255, 0.92);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .drawer-brand,
|
||||||
|
html[data-theme='ultra-dark'] .sider-brand {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .drawer-close {
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .drawer-close {
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .sidebar-theme-cycle {
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .sidebar-theme-cycle {
|
||||||
|
color: rgba(255, 255, 255, 0.92);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .ant-drawer .ant-drawer-content,
|
||||||
|
body.dark .ant-drawer .ant-drawer-body {
|
||||||
|
background: #252526 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .ant-drawer .ant-drawer-content,
|
||||||
|
html[data-theme='ultra-dark'] .ant-drawer .ant-drawer-body {
|
||||||
|
background: #0a0a0a !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider-nav .ant-menu-item-selected,
|
||||||
|
.sider-utility .ant-menu-item-selected,
|
||||||
|
.drawer-menu .ant-menu-item-selected {
|
||||||
|
background-color: rgba(64, 150, 255, 0.2) !important;
|
||||||
|
color: #4096ff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sider-nav .ant-menu-item-active:not(.ant-menu-item-selected),
|
||||||
|
.sider-utility .ant-menu-item-active:not(.ant-menu-item-selected),
|
||||||
|
.drawer-menu .ant-menu-item-active:not(.ant-menu-item-selected),
|
||||||
|
.sider-nav .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-disabled):hover,
|
||||||
|
.sider-utility .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-disabled):hover,
|
||||||
|
.drawer-menu .ant-menu-item:not(.ant-menu-item-selected):not(.ant-menu-item-disabled):hover {
|
||||||
|
background-color: rgba(64, 150, 255, 0.1) !important;
|
||||||
|
color: #4096ff !important;
|
||||||
|
}
|
||||||
260
frontend/src/components/AppSidebar.tsx
Normal file
260
frontend/src/components/AppSidebar.tsx
Normal file
|
|
@ -0,0 +1,260 @@
|
||||||
|
import { useCallback, useMemo, useState } from 'react';
|
||||||
|
import type { ComponentType } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Drawer, Layout, Menu } from 'antd';
|
||||||
|
import type { MenuProps } from 'antd';
|
||||||
|
import {
|
||||||
|
ApiOutlined,
|
||||||
|
ClusterOutlined,
|
||||||
|
CloseOutlined,
|
||||||
|
DashboardOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
MenuOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
TeamOutlined,
|
||||||
|
ToolOutlined,
|
||||||
|
UserOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
|
||||||
|
import { HttpUtil } from '@/utils';
|
||||||
|
import { pauseAnimationsUntilLeave, useTheme } from '@/hooks/useTheme';
|
||||||
|
import './AppSidebar.css';
|
||||||
|
|
||||||
|
const SIDEBAR_COLLAPSED_KEY = 'isSidebarCollapsed';
|
||||||
|
|
||||||
|
interface AppSidebarProps {
|
||||||
|
basePath?: string;
|
||||||
|
requestUri?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type IconName = 'dashboard' | 'user' | 'team' | 'setting' | 'tool' | 'cluster' | 'logout' | 'apidocs';
|
||||||
|
|
||||||
|
const iconByName: Record<IconName, ComponentType> = {
|
||||||
|
dashboard: DashboardOutlined,
|
||||||
|
user: UserOutlined,
|
||||||
|
team: TeamOutlined,
|
||||||
|
setting: SettingOutlined,
|
||||||
|
tool: ToolOutlined,
|
||||||
|
cluster: ClusterOutlined,
|
||||||
|
logout: LogoutOutlined,
|
||||||
|
apidocs: ApiOutlined,
|
||||||
|
};
|
||||||
|
|
||||||
|
function readCollapsed(): boolean {
|
||||||
|
try {
|
||||||
|
return JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY) || 'false');
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function ThemeCycleButton({ id, isDark, isUltra, onCycle, ariaLabel }: {
|
||||||
|
id: string;
|
||||||
|
isDark: boolean;
|
||||||
|
isUltra: boolean;
|
||||||
|
onCycle: () => void;
|
||||||
|
ariaLabel: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
id={id}
|
||||||
|
type="button"
|
||||||
|
className="sidebar-theme-cycle"
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
title={ariaLabel}
|
||||||
|
onClick={onCycle}
|
||||||
|
>
|
||||||
|
{!isDark ? (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||||
|
<circle cx="12" cy="12" r="4" />
|
||||||
|
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
|
||||||
|
</svg>
|
||||||
|
) : !isUltra ? (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||||
|
</svg>
|
||||||
|
) : (
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||||
|
<path fill="none" d="M19 3l0.7 1.4 1.4 0.7-1.4 0.7L19 7.2l-0.7-1.4-1.4-0.7 1.4-0.7z" />
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AppSidebar({ basePath = '', requestUri = '' }: AppSidebarProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { isDark, isUltra, toggleTheme, toggleUltra } = useTheme();
|
||||||
|
|
||||||
|
const [collapsed, setCollapsed] = useState<boolean>(() => readCollapsed());
|
||||||
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||||
|
|
||||||
|
const prefix = basePath.startsWith('/') ? basePath : `/${basePath || ''}`;
|
||||||
|
const currentTheme: 'light' | 'dark' = isDark ? 'dark' : 'light';
|
||||||
|
|
||||||
|
const tabs = useMemo<{ key: string; icon: IconName; title: string }[]>(() => [
|
||||||
|
{ key: `${prefix}panel/`, icon: 'dashboard', title: t('menu.dashboard') },
|
||||||
|
{ key: `${prefix}panel/inbounds`, icon: 'user', title: t('menu.inbounds') },
|
||||||
|
{ key: `${prefix}panel/clients`, icon: 'team', title: t('menu.clients') },
|
||||||
|
{ key: `${prefix}panel/nodes`, icon: 'cluster', title: t('menu.nodes') },
|
||||||
|
{ key: `${prefix}panel/settings`, icon: 'setting', title: t('menu.settings') },
|
||||||
|
{ key: `${prefix}panel/xray`, icon: 'tool', title: t('menu.xray') },
|
||||||
|
{ key: `${prefix}panel/api-docs`, icon: 'apidocs', title: t('menu.apiDocs') },
|
||||||
|
{ key: 'logout', icon: 'logout', title: t('logout') },
|
||||||
|
], [prefix, t]);
|
||||||
|
|
||||||
|
const navItems = useMemo(() => tabs.filter((tab) => tab.icon !== 'logout'), [tabs]);
|
||||||
|
const utilItems = useMemo(() => tabs.filter((tab) => tab.icon === 'logout'), [tabs]);
|
||||||
|
|
||||||
|
const toMenuItems = useCallback((items: typeof tabs): MenuProps['items'] =>
|
||||||
|
items.map((tab) => {
|
||||||
|
const Icon = iconByName[tab.icon];
|
||||||
|
return {
|
||||||
|
key: tab.key,
|
||||||
|
icon: <Icon />,
|
||||||
|
label: tab.title,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
[]);
|
||||||
|
|
||||||
|
const openLink = useCallback(async (key: string) => {
|
||||||
|
if (key === 'logout') {
|
||||||
|
await HttpUtil.post('/logout');
|
||||||
|
window.location.href = basePath || '/';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (key.startsWith('http')) {
|
||||||
|
window.open(key);
|
||||||
|
} else {
|
||||||
|
window.location.href = key;
|
||||||
|
}
|
||||||
|
}, [basePath]);
|
||||||
|
|
||||||
|
const onMenuClick = useCallback<NonNullable<MenuProps['onClick']>>(({ key }) => {
|
||||||
|
openLink(String(key));
|
||||||
|
}, [openLink]);
|
||||||
|
|
||||||
|
const onSiderCollapse = useCallback((isCollapsed: boolean, type: 'clickTrigger' | 'responsive') => {
|
||||||
|
if (type === 'clickTrigger') {
|
||||||
|
localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(isCollapsed));
|
||||||
|
setCollapsed(isCollapsed);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const cycleTheme = useCallback((id: string) => {
|
||||||
|
pauseAnimationsUntilLeave(id);
|
||||||
|
if (!isDark) {
|
||||||
|
toggleTheme();
|
||||||
|
if (isUltra) toggleUltra();
|
||||||
|
} else if (!isUltra) {
|
||||||
|
toggleUltra();
|
||||||
|
} else {
|
||||||
|
toggleUltra();
|
||||||
|
toggleTheme();
|
||||||
|
}
|
||||||
|
}, [isDark, isUltra, toggleTheme, toggleUltra]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ant-sidebar">
|
||||||
|
<Layout.Sider
|
||||||
|
theme={currentTheme}
|
||||||
|
collapsible
|
||||||
|
collapsed={collapsed}
|
||||||
|
breakpoint="md"
|
||||||
|
onCollapse={onSiderCollapse}
|
||||||
|
>
|
||||||
|
<div className={`sider-brand${collapsed ? ' sider-brand-collapsed' : ''}`}>
|
||||||
|
<span className="brand-text">{collapsed ? '3X' : '3X-UI'}</span>
|
||||||
|
{!collapsed && (
|
||||||
|
<ThemeCycleButton
|
||||||
|
id="theme-cycle"
|
||||||
|
isDark={isDark}
|
||||||
|
isUltra={isUltra}
|
||||||
|
onCycle={() => cycleTheme('theme-cycle')}
|
||||||
|
ariaLabel={t('menu.theme')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Menu
|
||||||
|
theme={currentTheme}
|
||||||
|
mode="inline"
|
||||||
|
selectedKeys={[requestUri]}
|
||||||
|
className="sider-nav"
|
||||||
|
items={toMenuItems(navItems)}
|
||||||
|
onClick={onMenuClick}
|
||||||
|
/>
|
||||||
|
<Menu
|
||||||
|
theme={currentTheme}
|
||||||
|
mode="inline"
|
||||||
|
selectedKeys={[requestUri]}
|
||||||
|
className="sider-utility"
|
||||||
|
items={toMenuItems(utilItems)}
|
||||||
|
onClick={onMenuClick}
|
||||||
|
/>
|
||||||
|
</Layout.Sider>
|
||||||
|
|
||||||
|
<Drawer
|
||||||
|
placement="left"
|
||||||
|
closable={false}
|
||||||
|
open={drawerOpen}
|
||||||
|
rootClassName={currentTheme}
|
||||||
|
width="min(82vw, 320px)"
|
||||||
|
styles={{
|
||||||
|
wrapper: { padding: 0 },
|
||||||
|
body: { padding: 0, display: 'flex', flexDirection: 'column', height: '100%' },
|
||||||
|
header: { display: 'none' },
|
||||||
|
}}
|
||||||
|
onClose={() => setDrawerOpen(false)}
|
||||||
|
>
|
||||||
|
<div className="drawer-header">
|
||||||
|
<span className="drawer-brand">3X-UI</span>
|
||||||
|
<div className="drawer-header-actions">
|
||||||
|
<ThemeCycleButton
|
||||||
|
id="theme-cycle-drawer"
|
||||||
|
isDark={isDark}
|
||||||
|
isUltra={isUltra}
|
||||||
|
onCycle={() => cycleTheme('theme-cycle-drawer')}
|
||||||
|
ariaLabel={t('menu.theme')}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="drawer-close"
|
||||||
|
type="button"
|
||||||
|
aria-label={t('close')}
|
||||||
|
onClick={() => setDrawerOpen(false)}
|
||||||
|
>
|
||||||
|
<CloseOutlined />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Menu
|
||||||
|
theme={currentTheme}
|
||||||
|
mode="inline"
|
||||||
|
selectedKeys={[requestUri]}
|
||||||
|
className="drawer-menu drawer-nav"
|
||||||
|
items={toMenuItems(navItems)}
|
||||||
|
onClick={(info) => { onMenuClick(info); setDrawerOpen(false); }}
|
||||||
|
/>
|
||||||
|
<Menu
|
||||||
|
theme={currentTheme}
|
||||||
|
mode="inline"
|
||||||
|
selectedKeys={[requestUri]}
|
||||||
|
className="drawer-menu drawer-utility"
|
||||||
|
items={toMenuItems(utilItems)}
|
||||||
|
onClick={(info) => { onMenuClick(info); setDrawerOpen(false); }}
|
||||||
|
/>
|
||||||
|
</Drawer>
|
||||||
|
|
||||||
|
{!drawerOpen && (
|
||||||
|
<button
|
||||||
|
className="drawer-handle"
|
||||||
|
type="button"
|
||||||
|
aria-label={t('menu.dashboard')}
|
||||||
|
onClick={() => setDrawerOpen(true)}
|
||||||
|
>
|
||||||
|
<MenuOutlined />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import { createApp } from 'vue';
|
|
||||||
import Antd, { message } from 'ant-design-vue';
|
|
||||||
import 'ant-design-vue/dist/reset.css';
|
|
||||||
|
|
||||||
import { setupAxios } from '@/api/axios-init.js';
|
|
||||||
import '@/composables/useTheme.js';
|
|
||||||
import { i18n, readyI18n } from '@/i18n/index.js';
|
|
||||||
import { applyDocumentTitle } from '@/utils';
|
|
||||||
import ApiDocsPage from '@/pages/api-docs/ApiDocsPage.vue';
|
|
||||||
|
|
||||||
setupAxios();
|
|
||||||
applyDocumentTitle();
|
|
||||||
|
|
||||||
const messageContainer = document.getElementById('message');
|
|
||||||
if (messageContainer) {
|
|
||||||
message.config({ getContainer: () => messageContainer });
|
|
||||||
}
|
|
||||||
|
|
||||||
readyI18n().then(() => {
|
|
||||||
createApp(ApiDocsPage).use(Antd).use(i18n).mount('#app');
|
|
||||||
});
|
|
||||||
28
frontend/src/entries/api-docs.tsx
Normal file
28
frontend/src/entries/api-docs.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import { message } from 'antd';
|
||||||
|
import 'antd/dist/reset.css';
|
||||||
|
|
||||||
|
import { setupAxios } from '@/api/axios-init.js';
|
||||||
|
import { applyDocumentTitle } from '@/utils';
|
||||||
|
import { readyI18n } from '@/i18n/react';
|
||||||
|
import { ThemeProvider } from '@/hooks/useTheme';
|
||||||
|
import ApiDocsPage from '@/pages/api-docs/ApiDocsPage';
|
||||||
|
|
||||||
|
setupAxios();
|
||||||
|
applyDocumentTitle();
|
||||||
|
|
||||||
|
const messageContainer = document.getElementById('message');
|
||||||
|
if (messageContainer) {
|
||||||
|
message.config({ getContainer: () => messageContainer });
|
||||||
|
}
|
||||||
|
|
||||||
|
readyI18n().then(() => {
|
||||||
|
const root = document.getElementById('app');
|
||||||
|
if (root) {
|
||||||
|
createRoot(root).render(
|
||||||
|
<ThemeProvider>
|
||||||
|
<ApiDocsPage />
|
||||||
|
</ThemeProvider>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
292
frontend/src/pages/api-docs/ApiDocsPage.css
Normal file
292
frontend/src/pages/api-docs/ApiDocsPage.css
Normal file
|
|
@ -0,0 +1,292 @@
|
||||||
|
.api-docs-page {
|
||||||
|
--bg-page: #e6e8ec;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: var(--bg-page);
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-docs-page.is-dark {
|
||||||
|
--bg-page: #1e1e1e;
|
||||||
|
--bg-card: #252526;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-docs-page.is-dark.is-ultra {
|
||||||
|
--bg-page: #000;
|
||||||
|
--bg-card: #0a0a0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-docs-page .content-shell {
|
||||||
|
background: var(--bg-page);
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-docs-page .content-area {
|
||||||
|
padding: 24px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.api-docs-page .content-area {
|
||||||
|
padding: 16px 12px 12px;
|
||||||
|
padding-top: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-wrapper {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-header {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 24px;
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid rgba(128, 128, 128, 0.12);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-title {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
color: rgba(0, 0, 0, 0.88);
|
||||||
|
letter-spacing: -0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-lead {
|
||||||
|
margin: 0;
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
line-height: 1.65;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-lead code,
|
||||||
|
.token-hint code {
|
||||||
|
background: rgba(128, 128, 128, 0.12);
|
||||||
|
padding: 1px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 12.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-card,
|
||||||
|
.curl-card {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-card-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
min-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-card-title {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-hint {
|
||||||
|
margin: 10px 0 0;
|
||||||
|
color: rgba(0, 0, 0, 0.55);
|
||||||
|
font-size: 12.5px;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.match-count {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px 12px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid rgba(128, 128, 128, 0.12);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
padding-top: 3px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12.5px;
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
background: rgba(128, 128, 128, 0.06);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-link:hover {
|
||||||
|
background: rgba(22, 119, 255, 0.08);
|
||||||
|
color: #1677ff;
|
||||||
|
border-color: rgba(22, 119, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-link.active {
|
||||||
|
background: rgba(22, 119, 255, 0.12);
|
||||||
|
color: #1677ff;
|
||||||
|
border-color: rgba(22, 119, 255, 0.3);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-icon {
|
||||||
|
font-size: 13px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-text {
|
||||||
|
font-size: 12.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
padding: 0 5px;
|
||||||
|
border-radius: 9px;
|
||||||
|
font-size: 10.5px;
|
||||||
|
font-weight: 700;
|
||||||
|
background: rgba(22, 119, 255, 0.12);
|
||||||
|
color: #1677ff;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-link.active .toc-badge {
|
||||||
|
background: #1677ff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .docs-title {
|
||||||
|
color: rgba(255, 255, 255, 0.92);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .docs-title {
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .docs-header {
|
||||||
|
background: #252526;
|
||||||
|
border-color: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .docs-header {
|
||||||
|
background: #0a0a0a;
|
||||||
|
border-color: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .docs-lead,
|
||||||
|
body.dark .token-hint {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .docs-lead,
|
||||||
|
html[data-theme='ultra-dark'] .token-hint {
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .docs-lead code,
|
||||||
|
body.dark .token-hint code {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .docs-lead code,
|
||||||
|
html[data-theme='ultra-dark'] .token-hint code {
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .toc-nav {
|
||||||
|
background: #252526;
|
||||||
|
border-color: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .toc-nav {
|
||||||
|
background: #0a0a0a;
|
||||||
|
border-color: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .toc-label {
|
||||||
|
color: rgba(255, 255, 255, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .toc-label {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .toc-link {
|
||||||
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme='ultra-dark'] .toc-link {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .toc-link:hover {
|
||||||
|
background: rgba(88, 166, 255, 0.12);
|
||||||
|
color: #58a6ff;
|
||||||
|
border-color: rgba(88, 166, 255, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .toc-link.active {
|
||||||
|
background: rgba(88, 166, 255, 0.15);
|
||||||
|
color: #58a6ff;
|
||||||
|
border-color: rgba(88, 166, 255, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .toc-badge {
|
||||||
|
background: rgba(88, 166, 255, 0.15);
|
||||||
|
color: #58a6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .toc-link.active .toc-badge {
|
||||||
|
background: #58a6ff;
|
||||||
|
color: #0d1117;
|
||||||
|
}
|
||||||
246
frontend/src/pages/api-docs/ApiDocsPage.tsx
Normal file
246
frontend/src/pages/api-docs/ApiDocsPage.tsx
Normal file
|
|
@ -0,0 +1,246 @@
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||||
|
import type { ComponentType, MouseEvent } from 'react';
|
||||||
|
import { Button, Card, ConfigProvider, Input, Layout, Space } from 'antd';
|
||||||
|
import {
|
||||||
|
ApiOutlined,
|
||||||
|
CloudServerOutlined,
|
||||||
|
ClusterOutlined,
|
||||||
|
CompressOutlined,
|
||||||
|
ExpandOutlined,
|
||||||
|
GlobalOutlined,
|
||||||
|
KeyOutlined,
|
||||||
|
LinkOutlined,
|
||||||
|
NodeIndexOutlined,
|
||||||
|
SafetyCertificateOutlined,
|
||||||
|
SaveOutlined,
|
||||||
|
SearchOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
WifiOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
|
|
||||||
|
import { useTheme } from '@/hooks/useTheme';
|
||||||
|
import AppSidebar from '@/components/AppSidebar';
|
||||||
|
import { sections as allSections } from './endpoints.js';
|
||||||
|
import EndpointSection from './EndpointSection';
|
||||||
|
import type { Section } from './EndpointSection';
|
||||||
|
import CodeBlock from './CodeBlock';
|
||||||
|
import './ApiDocsPage.css';
|
||||||
|
|
||||||
|
const sectionIcons: Record<string, ComponentType<{ className?: string }>> = {
|
||||||
|
authentication: SafetyCertificateOutlined,
|
||||||
|
inbounds: NodeIndexOutlined,
|
||||||
|
server: CloudServerOutlined,
|
||||||
|
nodes: ClusterOutlined,
|
||||||
|
'custom-geo': GlobalOutlined,
|
||||||
|
backup: SaveOutlined,
|
||||||
|
settings: SettingOutlined,
|
||||||
|
'api-tokens': KeyOutlined,
|
||||||
|
'xray-settings': WifiOutlined,
|
||||||
|
subscription: LinkOutlined,
|
||||||
|
websocket: ApiOutlined,
|
||||||
|
};
|
||||||
|
|
||||||
|
const curlExample = `curl -X GET \\
|
||||||
|
-H "Authorization: Bearer YOUR_API_TOKEN" \\
|
||||||
|
-H "Accept: application/json" \\
|
||||||
|
https://your-panel.example.com/panel/api/inbounds/list`;
|
||||||
|
|
||||||
|
const basePath = window.X_UI_BASE_PATH || '';
|
||||||
|
const requestUri = window.location.pathname;
|
||||||
|
const settingsHref = `${basePath}panel/settings#security`;
|
||||||
|
|
||||||
|
const endpointCount = (allSections as Section[]).reduce(
|
||||||
|
(sum, s) => sum + s.endpoints.length,
|
||||||
|
0,
|
||||||
|
);
|
||||||
|
|
||||||
|
export default function ApiDocsPage() {
|
||||||
|
const { isDark, isUltra, antdThemeConfig } = useTheme();
|
||||||
|
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [collapsedSections, setCollapsedSections] = useState<Set<string>>(() => new Set());
|
||||||
|
const [activeSection, setActiveSection] = useState('');
|
||||||
|
|
||||||
|
const sections = useMemo<Section[]>(() => {
|
||||||
|
const q = searchQuery.toLowerCase().trim();
|
||||||
|
if (!q) return allSections as Section[];
|
||||||
|
return (allSections as Section[])
|
||||||
|
.map((s) => ({
|
||||||
|
...s,
|
||||||
|
endpoints: s.endpoints.filter((e) =>
|
||||||
|
e.path.toLowerCase().includes(q)
|
||||||
|
|| e.summary?.toLowerCase().includes(q)
|
||||||
|
|| e.method.toLowerCase().includes(q),
|
||||||
|
),
|
||||||
|
}))
|
||||||
|
.filter((s) => s.endpoints.length > 0);
|
||||||
|
}, [searchQuery]);
|
||||||
|
|
||||||
|
const visibleEndpoints = useMemo(
|
||||||
|
() => sections.reduce((sum, s) => sum + s.endpoints.length, 0),
|
||||||
|
[sections],
|
||||||
|
);
|
||||||
|
|
||||||
|
const toggleSection = useCallback((id: string) => {
|
||||||
|
setCollapsedSections((prev) => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(id)) next.delete(id); else next.add(id);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const expandAll = useCallback(() => setCollapsedSections(new Set()), []);
|
||||||
|
const collapseAll = useCallback(
|
||||||
|
() => setCollapsedSections(new Set((allSections as Section[]).map((s) => s.id))),
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
|
const scrollToSection = useCallback((id: string) => (e: MouseEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (!el) return;
|
||||||
|
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
if (window.location.hash !== `#${id}`) {
|
||||||
|
history.replaceState(null, '', `#${id}`);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onHashChange = () => {
|
||||||
|
const id = window.location.hash.slice(1);
|
||||||
|
if (!id) return;
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) el.scrollIntoView({ behavior: 'auto', block: 'start' });
|
||||||
|
};
|
||||||
|
requestAnimationFrame(onHashChange);
|
||||||
|
window.addEventListener('hashchange', onHashChange);
|
||||||
|
return () => window.removeEventListener('hashchange', onHashChange);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onScroll = () => {
|
||||||
|
const toc = document.querySelector('.toc-nav');
|
||||||
|
const tocHeight = toc instanceof HTMLElement ? toc.offsetHeight : 56;
|
||||||
|
let current = '';
|
||||||
|
for (const s of sections) {
|
||||||
|
const el = document.getElementById(s.id);
|
||||||
|
if (!el) continue;
|
||||||
|
const rect = el.getBoundingClientRect();
|
||||||
|
if (rect.top <= tocHeight + 20) {
|
||||||
|
current = s.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setActiveSection(current);
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||||||
|
requestAnimationFrame(onScroll);
|
||||||
|
return () => window.removeEventListener('scroll', onScroll);
|
||||||
|
}, [sections]);
|
||||||
|
|
||||||
|
const pageClass = useMemo(() => {
|
||||||
|
const classes = ['api-docs-page'];
|
||||||
|
if (isDark) classes.push('is-dark');
|
||||||
|
if (isUltra) classes.push('is-ultra');
|
||||||
|
return classes.join(' ');
|
||||||
|
}, [isDark, isUltra]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConfigProvider theme={antdThemeConfig}>
|
||||||
|
<Layout className={pageClass}>
|
||||||
|
<AppSidebar basePath={basePath} requestUri={requestUri} />
|
||||||
|
|
||||||
|
<Layout className="content-shell">
|
||||||
|
<Layout.Content className="content-area">
|
||||||
|
<div className="docs-wrapper">
|
||||||
|
<header className="docs-header">
|
||||||
|
<h1 className="docs-title">API Documentation</h1>
|
||||||
|
<p className="docs-lead">
|
||||||
|
The 3x-ui panel exposes a REST API under <code>/panel/api/</code>. Authenticate with the panel session
|
||||||
|
cookie, or with the <code>Authorization: Bearer <token></code> header below. Every endpoint
|
||||||
|
returns a uniform <code>{'{ success, msg, obj }'}</code> envelope unless otherwise noted.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<Card className="token-card" size="small">
|
||||||
|
<div className="token-card-head">
|
||||||
|
<div className="token-card-title">
|
||||||
|
<KeyOutlined />
|
||||||
|
<span>API Tokens</span>
|
||||||
|
</div>
|
||||||
|
<Button type="primary" size="small" href={settingsHref}>
|
||||||
|
Manage tokens
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="token-hint">
|
||||||
|
Create, enable, or revoke named Bearer tokens in{' '}
|
||||||
|
<a href={settingsHref}>Settings → Security</a>. Send each request as{' '}
|
||||||
|
<code>Authorization: Bearer <token></code>. Token-authenticated callers skip CSRF and don't
|
||||||
|
need a session cookie. Deleting a token revokes it immediately — running bots will need a new one.
|
||||||
|
</p>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="curl-card" size="small" title="Quick example">
|
||||||
|
<CodeBlock code={curlExample} lang="text" />
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="toolbar">
|
||||||
|
<Input
|
||||||
|
className="search-bar"
|
||||||
|
prefix={<SearchOutlined />}
|
||||||
|
placeholder="Search endpoints by path, method, or description…"
|
||||||
|
allowClear
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
{searchQuery && (
|
||||||
|
<span className="match-count">
|
||||||
|
{visibleEndpoints} / {endpointCount} endpoints
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<Space size="small">
|
||||||
|
<Button size="small" icon={<ExpandOutlined />} onClick={expandAll}>
|
||||||
|
Expand all
|
||||||
|
</Button>
|
||||||
|
<Button size="small" icon={<CompressOutlined />} onClick={collapseAll}>
|
||||||
|
Collapse all
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="toc-nav">
|
||||||
|
<span className="toc-label">On this page:</span>
|
||||||
|
<div className="toc-links">
|
||||||
|
{sections.map((s) => {
|
||||||
|
const Icon = sectionIcons[s.id];
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
key={s.id}
|
||||||
|
className={`toc-link${activeSection === s.id ? ' active' : ''}`}
|
||||||
|
href={`#${s.id}`}
|
||||||
|
onClick={scrollToSection(s.id)}
|
||||||
|
>
|
||||||
|
{Icon && <Icon />}
|
||||||
|
<span className="toc-text">{s.title}</span>
|
||||||
|
<span className="toc-badge">{s.endpoints.length}</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{sections.map((s) => (
|
||||||
|
<EndpointSection
|
||||||
|
key={s.id}
|
||||||
|
section={s}
|
||||||
|
icon={sectionIcons[s.id]}
|
||||||
|
collapsed={collapsedSections.has(s.id)}
|
||||||
|
onToggle={() => toggleSection(s.id)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Layout.Content>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
</ConfigProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,561 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
|
||||||
import {
|
|
||||||
KeyOutlined,
|
|
||||||
SearchOutlined,
|
|
||||||
ExpandOutlined,
|
|
||||||
CompressOutlined,
|
|
||||||
ApiOutlined,
|
|
||||||
SafetyCertificateOutlined,
|
|
||||||
CloudServerOutlined,
|
|
||||||
ClusterOutlined,
|
|
||||||
GlobalOutlined,
|
|
||||||
SaveOutlined,
|
|
||||||
SettingOutlined,
|
|
||||||
WifiOutlined,
|
|
||||||
LinkOutlined,
|
|
||||||
NodeIndexOutlined,
|
|
||||||
} from '@ant-design/icons-vue';
|
|
||||||
|
|
||||||
import { theme as themeState, antdThemeConfig } from '@/composables/useTheme.js';
|
|
||||||
import AppSidebar from '@/components/AppSidebar.vue';
|
|
||||||
import { sections as allSections } from './endpoints.js';
|
|
||||||
import EndpointSection from './EndpointSection.vue';
|
|
||||||
import CodeBlock from './CodeBlock.vue';
|
|
||||||
|
|
||||||
const basePath = window.X_UI_BASE_PATH || '';
|
|
||||||
const requestUri = window.location.pathname;
|
|
||||||
const settingsHref = `${basePath}panel/settings#security`;
|
|
||||||
|
|
||||||
const searchQuery = ref('');
|
|
||||||
const collapsedSections = ref(new Set());
|
|
||||||
const activeSection = ref('');
|
|
||||||
|
|
||||||
const sectionIcons = {
|
|
||||||
authentication: SafetyCertificateOutlined,
|
|
||||||
inbounds: NodeIndexOutlined,
|
|
||||||
server: CloudServerOutlined,
|
|
||||||
nodes: ClusterOutlined,
|
|
||||||
'custom-geo': GlobalOutlined,
|
|
||||||
backup: SaveOutlined,
|
|
||||||
settings: SettingOutlined,
|
|
||||||
'api-tokens': KeyOutlined,
|
|
||||||
'xray-settings': WifiOutlined,
|
|
||||||
subscription: LinkOutlined,
|
|
||||||
websocket: ApiOutlined,
|
|
||||||
};
|
|
||||||
|
|
||||||
const curlExample = `curl -X GET \\
|
|
||||||
-H "Authorization: Bearer YOUR_API_TOKEN" \\
|
|
||||||
-H "Accept: application/json" \\
|
|
||||||
https://your-panel.example.com/panel/api/inbounds/list`;
|
|
||||||
|
|
||||||
const sections = computed(() => {
|
|
||||||
const q = searchQuery.value.toLowerCase().trim();
|
|
||||||
if (!q) return allSections;
|
|
||||||
return allSections
|
|
||||||
.map(s => {
|
|
||||||
const matching = s.endpoints.filter(e =>
|
|
||||||
e.path.toLowerCase().includes(q) ||
|
|
||||||
e.summary?.toLowerCase().includes(q) ||
|
|
||||||
e.method.toLowerCase().includes(q)
|
|
||||||
);
|
|
||||||
return { ...s, endpoints: matching };
|
|
||||||
})
|
|
||||||
.filter(s => s.endpoints.length > 0);
|
|
||||||
});
|
|
||||||
|
|
||||||
const endpointCount = computed(() =>
|
|
||||||
allSections.reduce((sum, s) => sum + s.endpoints.length, 0)
|
|
||||||
);
|
|
||||||
|
|
||||||
const visibleEndpoints = computed(() =>
|
|
||||||
sections.value.reduce((sum, s) => sum + s.endpoints.length, 0)
|
|
||||||
);
|
|
||||||
|
|
||||||
function isCollapsed(id) {
|
|
||||||
return collapsedSections.value.has(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleSection(id) {
|
|
||||||
const s = new Set(collapsedSections.value);
|
|
||||||
if (s.has(id)) s.delete(id); else s.add(id);
|
|
||||||
collapsedSections.value = s;
|
|
||||||
}
|
|
||||||
|
|
||||||
function expandAll() {
|
|
||||||
collapsedSections.value = new Set();
|
|
||||||
}
|
|
||||||
|
|
||||||
function collapseAll() {
|
|
||||||
collapsedSections.value = new Set(allSections.map(s => s.id));
|
|
||||||
}
|
|
||||||
|
|
||||||
function scrollToSection(id) {
|
|
||||||
const el = document.getElementById(id);
|
|
||||||
if (!el) return;
|
|
||||||
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
||||||
if (window.location.hash !== `#${id}`) {
|
|
||||||
history.replaceState(null, '', `#${id}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function scrollToHash() {
|
|
||||||
const id = window.location.hash.slice(1);
|
|
||||||
if (!id) return;
|
|
||||||
const el = document.getElementById(id);
|
|
||||||
if (el) el.scrollIntoView({ behavior: 'auto', block: 'start' });
|
|
||||||
}
|
|
||||||
|
|
||||||
let scrollObserver = null;
|
|
||||||
function onScroll() {
|
|
||||||
const toc = document.querySelector('.toc-nav');
|
|
||||||
const tocHeight = toc ? toc.offsetHeight : 56;
|
|
||||||
let current = '';
|
|
||||||
for (const s of sections.value) {
|
|
||||||
const el = document.getElementById(s.id);
|
|
||||||
if (!el) continue;
|
|
||||||
const rect = el.getBoundingClientRect();
|
|
||||||
if (rect.top <= tocHeight + 20) {
|
|
||||||
current = s.id;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
activeSection.value = current;
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
scrollObserver = onScroll;
|
|
||||||
window.addEventListener('scroll', scrollObserver, { passive: true });
|
|
||||||
window.addEventListener('hashchange', scrollToHash);
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
scrollToHash();
|
|
||||||
onScroll();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
if (scrollObserver) {
|
|
||||||
window.removeEventListener('scroll', scrollObserver);
|
|
||||||
}
|
|
||||||
window.removeEventListener('hashchange', scrollToHash);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<a-config-provider :theme="antdThemeConfig">
|
|
||||||
<a-layout class="api-docs-page" :class="{ 'is-dark': themeState.isDark, 'is-ultra': themeState.isUltra }">
|
|
||||||
<AppSidebar :base-path="basePath" :request-uri="requestUri" />
|
|
||||||
|
|
||||||
<a-layout class="content-shell">
|
|
||||||
<a-layout-content class="content-area">
|
|
||||||
<div class="docs-wrapper">
|
|
||||||
<header class="docs-header">
|
|
||||||
<h1 class="docs-title">API Documentation</h1>
|
|
||||||
<p class="docs-lead">
|
|
||||||
The 3x-ui panel exposes a REST API under <code>/panel/api/</code>. Authenticate with the panel session
|
|
||||||
cookie, or with the <code>Authorization: Bearer <token></code> header below. Every endpoint
|
|
||||||
returns a uniform <code>{ success, msg, obj }</code> envelope unless otherwise noted.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<a-card class="token-card" size="small">
|
|
||||||
<div class="token-card-head">
|
|
||||||
<div class="token-card-title">
|
|
||||||
<KeyOutlined />
|
|
||||||
<span>API Tokens</span>
|
|
||||||
</div>
|
|
||||||
<a-button type="primary" size="small" :href="settingsHref">
|
|
||||||
Manage tokens
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<p class="token-hint">
|
|
||||||
Create, enable, or revoke named Bearer tokens in
|
|
||||||
<a :href="settingsHref">Settings → Security</a>. Send each request as
|
|
||||||
<code>Authorization: Bearer <token></code>. Token-authenticated callers skip CSRF and don't
|
|
||||||
need a session cookie. Deleting a token revokes it immediately — running bots will need a new one.
|
|
||||||
</p>
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<a-card class="curl-card" size="small" title="Quick example">
|
|
||||||
<CodeBlock :code="curlExample" lang="text" />
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<div class="toolbar">
|
|
||||||
<a-input-search
|
|
||||||
v-model:value="searchQuery"
|
|
||||||
placeholder="Search endpoints by path, method, or description…"
|
|
||||||
allow-clear
|
|
||||||
class="search-bar"
|
|
||||||
>
|
|
||||||
<template #prefix><SearchOutlined /></template>
|
|
||||||
</a-input-search>
|
|
||||||
<span class="match-count" v-if="searchQuery">
|
|
||||||
{{ visibleEndpoints }} / {{ endpointCount }} endpoints
|
|
||||||
</span>
|
|
||||||
<a-space size="small">
|
|
||||||
<a-button size="small" @click="expandAll">
|
|
||||||
<template #icon><ExpandOutlined /></template>
|
|
||||||
Expand all
|
|
||||||
</a-button>
|
|
||||||
<a-button size="small" @click="collapseAll">
|
|
||||||
<template #icon><CompressOutlined /></template>
|
|
||||||
Collapse all
|
|
||||||
</a-button>
|
|
||||||
</a-space>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="toc-nav">
|
|
||||||
<span class="toc-label">On this page:</span>
|
|
||||||
<div class="toc-links">
|
|
||||||
<a
|
|
||||||
v-for="s in sections"
|
|
||||||
:key="s.id"
|
|
||||||
class="toc-link"
|
|
||||||
:class="{ active: activeSection === s.id }"
|
|
||||||
:href="`#${s.id}`"
|
|
||||||
@click.prevent="scrollToSection(s.id)"
|
|
||||||
>
|
|
||||||
<component :is="sectionIcons[s.id]" class="toc-icon" />
|
|
||||||
<span class="toc-text">{{ s.title }}</span>
|
|
||||||
<span class="toc-badge">{{ s.endpoints.length }}</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<EndpointSection
|
|
||||||
v-for="s in sections"
|
|
||||||
:key="s.id"
|
|
||||||
:section="s"
|
|
||||||
:icon="sectionIcons[s.id]"
|
|
||||||
:collapsed="isCollapsed(s.id)"
|
|
||||||
@toggle="toggleSection(s.id)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</a-layout-content>
|
|
||||||
</a-layout>
|
|
||||||
</a-layout>
|
|
||||||
</a-config-provider>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.api-docs-page {
|
|
||||||
--bg-page: #e6e8ec;
|
|
||||||
--bg-card: #ffffff;
|
|
||||||
min-height: 100vh;
|
|
||||||
background: var(--bg-page);
|
|
||||||
}
|
|
||||||
|
|
||||||
.api-docs-page.is-dark {
|
|
||||||
--bg-page: #1e1e1e;
|
|
||||||
--bg-card: #252526;
|
|
||||||
}
|
|
||||||
|
|
||||||
.api-docs-page.is-dark.is-ultra {
|
|
||||||
--bg-page: #000;
|
|
||||||
--bg-card: #0a0a0a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-shell {
|
|
||||||
background: var(--bg-page);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-area {
|
|
||||||
padding: 24px;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.content-area {
|
|
||||||
padding: 16px 12px 12px;
|
|
||||||
padding-top: 64px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs-wrapper {
|
|
||||||
max-width: 1100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs-header {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 24px;
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid rgba(128, 128, 128, 0.12);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs-title {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 800;
|
|
||||||
margin: 0 0 8px;
|
|
||||||
color: rgba(0, 0, 0, 0.88);
|
|
||||||
letter-spacing: -0.3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs-lead {
|
|
||||||
margin: 0;
|
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
line-height: 1.65;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.docs-lead code,
|
|
||||||
.token-hint code {
|
|
||||||
background: rgba(128, 128, 128, 0.12);
|
|
||||||
padding: 1px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
||||||
font-size: 12.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-card,
|
|
||||||
.curl-card {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-card-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
min-height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-card-title {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-hint {
|
|
||||||
margin: 10px 0 0;
|
|
||||||
color: rgba(0, 0, 0, 0.55);
|
|
||||||
font-size: 12.5px;
|
|
||||||
line-height: 1.55;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-block {
|
|
||||||
background: rgba(128, 128, 128, 0.08);
|
|
||||||
border: 1px solid rgba(128, 128, 128, 0.15);
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
||||||
font-size: 12.5px;
|
|
||||||
line-height: 1.55;
|
|
||||||
margin: 0;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-word;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 480px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.match-count {
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgba(0, 0, 0, 0.5);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-nav {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 8px 12px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid rgba(128, 128, 128, 0.12);
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-label {
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.6px;
|
|
||||||
color: rgba(0, 0, 0, 0.5);
|
|
||||||
padding-top: 3px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-links {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 12.5px;
|
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
background: rgba(128, 128, 128, 0.06);
|
|
||||||
border: 1px solid transparent;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-link:hover {
|
|
||||||
background: rgba(22, 119, 255, 0.08);
|
|
||||||
color: #1677ff;
|
|
||||||
border-color: rgba(22, 119, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-link.active {
|
|
||||||
background: rgba(22, 119, 255, 0.12);
|
|
||||||
color: #1677ff;
|
|
||||||
border-color: rgba(22, 119, 255, 0.3);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-icon {
|
|
||||||
font-size: 13px;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-text {
|
|
||||||
font-size: 12.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
padding: 0 5px;
|
|
||||||
border-radius: 9px;
|
|
||||||
font-size: 10.5px;
|
|
||||||
font-weight: 700;
|
|
||||||
background: rgba(22, 119, 255, 0.12);
|
|
||||||
color: #1677ff;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toc-link.active .toc-badge {
|
|
||||||
background: #1677ff;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body.dark .docs-title {
|
|
||||||
color: rgba(255, 255, 255, 0.92);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='ultra-dark'] .docs-title {
|
|
||||||
color: rgba(255, 255, 255, 0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .docs-header {
|
|
||||||
background: #252526;
|
|
||||||
border-color: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='ultra-dark'] .docs-header {
|
|
||||||
background: #0a0a0a;
|
|
||||||
border-color: rgba(255, 255, 255, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .docs-lead,
|
|
||||||
body.dark .token-hint {
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='ultra-dark'] .docs-lead,
|
|
||||||
html[data-theme='ultra-dark'] .token-hint {
|
|
||||||
color: rgba(255, 255, 255, 0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .docs-lead code,
|
|
||||||
body.dark .token-hint code {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='ultra-dark'] .docs-lead code,
|
|
||||||
html[data-theme='ultra-dark'] .token-hint code {
|
|
||||||
background: rgba(255, 255, 255, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .code-block {
|
|
||||||
background: rgba(255, 255, 255, 0.04);
|
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: rgba(255, 255, 255, 0.88);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='ultra-dark'] .code-block {
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
border-color: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .toc-nav {
|
|
||||||
background: #252526;
|
|
||||||
border-color: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='ultra-dark'] .toc-nav {
|
|
||||||
background: #0a0a0a;
|
|
||||||
border-color: rgba(255, 255, 255, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .toc-label {
|
|
||||||
color: rgba(255, 255, 255, 0.55);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='ultra-dark'] .toc-label {
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .toc-link {
|
|
||||||
color: rgba(255, 255, 255, 0.65);
|
|
||||||
background: rgba(255, 255, 255, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme='ultra-dark'] .toc-link {
|
|
||||||
background: rgba(255, 255, 255, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .toc-link:hover {
|
|
||||||
background: rgba(88, 166, 255, 0.12);
|
|
||||||
color: #58a6ff;
|
|
||||||
border-color: rgba(88, 166, 255, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .toc-link.active {
|
|
||||||
background: rgba(88, 166, 255, 0.15);
|
|
||||||
color: #58a6ff;
|
|
||||||
border-color: rgba(88, 166, 255, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .toc-badge {
|
|
||||||
background: rgba(88, 166, 255, 0.15);
|
|
||||||
color: #58a6ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .toc-link.active .toc-badge {
|
|
||||||
background: #58a6ff;
|
|
||||||
color: #0d1117;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,67 +1,3 @@
|
||||||
<script setup>
|
|
||||||
import { computed, ref } from 'vue';
|
|
||||||
import { message } from 'ant-design-vue';
|
|
||||||
import { CopyOutlined, CheckOutlined } from '@ant-design/icons-vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
code: { type: String, default: '' },
|
|
||||||
lang: { type: String, default: 'json' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const copied = ref(false);
|
|
||||||
|
|
||||||
function escapeHtml(str) {
|
|
||||||
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
||||||
}
|
|
||||||
|
|
||||||
function highlightJson(str) {
|
|
||||||
const escaped = escapeHtml(str);
|
|
||||||
return escaped.replace(
|
|
||||||
/("(?:[^"\\]|\\.)*")\s*(:)|("(?:[^"\\]|\\.)*")|(-?\d+\.?\d*(?:[eE][+-]?\d+)?)\b|(true|false)|(null)|([{}[\]])/g,
|
|
||||||
(_m, key, colon, string, number, bool, nil) => {
|
|
||||||
if (colon) return `<span class="json-key">${key}</span>${colon}`;
|
|
||||||
if (string) return `<span class="json-string">${string}</span>`;
|
|
||||||
if (number) return `<span class="json-number">${number}</span>`;
|
|
||||||
if (bool) return `<span class="json-boolean">${bool}</span>`;
|
|
||||||
if (nil) return `<span class="json-null">${nil}</span>`;
|
|
||||||
return _m;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const highlighted = computed(() => {
|
|
||||||
if (props.lang === 'json') {
|
|
||||||
return highlightJson(props.code);
|
|
||||||
}
|
|
||||||
return escapeHtml(props.code);
|
|
||||||
});
|
|
||||||
|
|
||||||
async function copyCode() {
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(props.code);
|
|
||||||
copied.value = true;
|
|
||||||
message.success('Copied');
|
|
||||||
setTimeout(() => { copied.value = false; }, 2000);
|
|
||||||
} catch {
|
|
||||||
message.error('Copy failed');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="code-block-wrapper">
|
|
||||||
<div class="code-toolbar">
|
|
||||||
<span class="lang-badge">{{ lang.toUpperCase() }}</span>
|
|
||||||
<button class="copy-btn" :class="{ copied }" @click="copyCode" :title="copied ? 'Copied' : 'Copy'">
|
|
||||||
<CheckOutlined v-if="copied" />
|
|
||||||
<CopyOutlined v-else />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<pre class="code-block" :class="`lang-${lang}`"><code v-html="highlighted"></code></pre>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.code-block-wrapper {
|
.code-block-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
@ -127,9 +63,7 @@ async function copyCode() {
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.json-key { color: #0550ae; }
|
.json-key { color: #0550ae; }
|
||||||
.json-string { color: #116329; }
|
.json-string { color: #116329; }
|
||||||
.json-number { color: #9a6700; }
|
.json-number { color: #9a6700; }
|
||||||
|
|
@ -171,4 +105,3 @@ body.dark .copy-btn:hover {
|
||||||
color: #58a6ff;
|
color: #58a6ff;
|
||||||
border-color: #58a6ff;
|
border-color: #58a6ff;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
66
frontend/src/pages/api-docs/CodeBlock.tsx
Normal file
66
frontend/src/pages/api-docs/CodeBlock.tsx
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
import { message } from 'antd';
|
||||||
|
import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
|
||||||
|
import './CodeBlock.css';
|
||||||
|
|
||||||
|
interface CodeBlockProps {
|
||||||
|
code?: string;
|
||||||
|
lang?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(str: string): string {
|
||||||
|
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||||
|
}
|
||||||
|
|
||||||
|
function highlightJson(str: string): string {
|
||||||
|
const escaped = escapeHtml(str);
|
||||||
|
return escaped.replace(
|
||||||
|
/("(?:[^"\\]|\\.)*")\s*(:)|("(?:[^"\\]|\\.)*")|(-?\d+\.?\d*(?:[eE][+-]?\d+)?)\b|(true|false)|(null)|([{}[\]])/g,
|
||||||
|
(_m, key, colon, string, number, bool, nil) => {
|
||||||
|
if (colon) return `<span class="json-key">${key}</span>${colon}`;
|
||||||
|
if (string) return `<span class="json-string">${string}</span>`;
|
||||||
|
if (number) return `<span class="json-number">${number}</span>`;
|
||||||
|
if (bool) return `<span class="json-boolean">${bool}</span>`;
|
||||||
|
if (nil) return `<span class="json-null">${nil}</span>`;
|
||||||
|
return _m;
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CodeBlock({ code = '', lang = 'json' }: CodeBlockProps) {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
const highlighted = useMemo(
|
||||||
|
() => (lang === 'json' ? highlightJson(code) : escapeHtml(code)),
|
||||||
|
[code, lang],
|
||||||
|
);
|
||||||
|
|
||||||
|
async function copyCode() {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(code);
|
||||||
|
setCopied(true);
|
||||||
|
message.success('Copied');
|
||||||
|
window.setTimeout(() => setCopied(false), 2000);
|
||||||
|
} catch {
|
||||||
|
message.error('Copy failed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="code-block-wrapper">
|
||||||
|
<div className="code-toolbar">
|
||||||
|
<span className="lang-badge">{lang.toUpperCase()}</span>
|
||||||
|
<button
|
||||||
|
className={`copy-btn${copied ? ' copied' : ''}`}
|
||||||
|
onClick={copyCode}
|
||||||
|
title={copied ? 'Copied' : 'Copy'}
|
||||||
|
>
|
||||||
|
{copied ? <CheckOutlined /> : <CopyOutlined />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<pre className={`code-block lang-${lang}`}>
|
||||||
|
<code dangerouslySetInnerHTML={{ __html: highlighted }} />
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
93
frontend/src/pages/api-docs/EndpointRow.css
Normal file
93
frontend/src/pages/api-docs/EndpointRow.css
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
.endpoint-row {
|
||||||
|
padding: 14px 8px;
|
||||||
|
margin: 0 -8px;
|
||||||
|
transition: background 0.15s;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-row:hover {
|
||||||
|
background: rgba(128, 128, 128, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-row + .endpoint-row {
|
||||||
|
border-top: 1px solid rgba(128, 128, 128, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-tag {
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
min-width: 56px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-path {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 13.5px;
|
||||||
|
word-break: break-all;
|
||||||
|
color: rgba(0, 0, 0, 0.8);
|
||||||
|
background: rgba(128, 128, 128, 0.06);
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-summary {
|
||||||
|
margin: 8px 0 0;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 13.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-block {
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-label {
|
||||||
|
color: #cf222e;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .endpoint-row:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .endpoint-row + .endpoint-row {
|
||||||
|
border-top-color: rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .endpoint-path {
|
||||||
|
color: rgba(255, 255, 255, 0.82);
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .endpoint-summary {
|
||||||
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .block-label {
|
||||||
|
color: rgba(255, 255, 255, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark .error-label {
|
||||||
|
color: #ff7b72;
|
||||||
|
}
|
||||||
84
frontend/src/pages/api-docs/EndpointRow.tsx
Normal file
84
frontend/src/pages/api-docs/EndpointRow.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
import { Table, Tag } from 'antd';
|
||||||
|
import type { ColumnsType } from 'antd/es/table';
|
||||||
|
import { methodColors, safeInlineHtml } from './endpoints.js';
|
||||||
|
import CodeBlock from './CodeBlock';
|
||||||
|
import './EndpointRow.css';
|
||||||
|
|
||||||
|
interface Param {
|
||||||
|
name: string;
|
||||||
|
in?: string;
|
||||||
|
type?: string;
|
||||||
|
desc?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Endpoint {
|
||||||
|
method: string;
|
||||||
|
path: string;
|
||||||
|
summary?: string;
|
||||||
|
params?: Param[];
|
||||||
|
body?: string;
|
||||||
|
response?: string;
|
||||||
|
errorResponse?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const paramColumns: ColumnsType<Param> = [
|
||||||
|
{ title: 'Name', dataIndex: 'name', key: 'name', width: 180 },
|
||||||
|
{ title: 'In', dataIndex: 'in', key: 'in', width: 100 },
|
||||||
|
{ title: 'Type', dataIndex: 'type', key: 'type', width: 120 },
|
||||||
|
{ title: 'Description', dataIndex: 'desc', key: 'desc' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function EndpointRow({ endpoint }: { endpoint: Endpoint }) {
|
||||||
|
const tagColor = (methodColors as Record<string, string>)[endpoint.method] || 'default';
|
||||||
|
const hasParams = Array.isArray(endpoint.params) && endpoint.params.length > 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="endpoint-row">
|
||||||
|
<div className="endpoint-header">
|
||||||
|
<Tag color={tagColor} className="method-tag">{endpoint.method}</Tag>
|
||||||
|
<code className="endpoint-path">{endpoint.path}</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{endpoint.summary && (
|
||||||
|
<p
|
||||||
|
className="endpoint-summary"
|
||||||
|
dangerouslySetInnerHTML={{ __html: safeInlineHtml(endpoint.summary) }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{hasParams && (
|
||||||
|
<div className="endpoint-block">
|
||||||
|
<div className="block-label">Parameters</div>
|
||||||
|
<Table
|
||||||
|
columns={paramColumns}
|
||||||
|
dataSource={endpoint.params}
|
||||||
|
pagination={false}
|
||||||
|
size="small"
|
||||||
|
rowKey="name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{endpoint.body && (
|
||||||
|
<div className="endpoint-block">
|
||||||
|
<div className="block-label">Request body</div>
|
||||||
|
<CodeBlock code={endpoint.body} lang="json" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{endpoint.response && (
|
||||||
|
<div className="endpoint-block">
|
||||||
|
<div className="block-label">Response</div>
|
||||||
|
<CodeBlock code={endpoint.response} lang="json" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{endpoint.errorResponse && (
|
||||||
|
<div className="endpoint-block">
|
||||||
|
<div className="block-label error-label">Error response</div>
|
||||||
|
<CodeBlock code={endpoint.errorResponse} lang="json" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,172 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
import { methodColors, safeInlineHtml } from './endpoints.js';
|
|
||||||
import CodeBlock from './CodeBlock.vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
endpoint: { type: Object, required: true },
|
|
||||||
});
|
|
||||||
|
|
||||||
const tagColor = computed(() => methodColors[props.endpoint.method] || 'default');
|
|
||||||
const hasParams = computed(() => Array.isArray(props.endpoint.params) && props.endpoint.params.length > 0);
|
|
||||||
|
|
||||||
const paramColumns = [
|
|
||||||
{ title: 'Name', dataIndex: 'name', key: 'name', width: 180 },
|
|
||||||
{ title: 'In', dataIndex: 'in', key: 'in', width: 100 },
|
|
||||||
{ title: 'Type', dataIndex: 'type', key: 'type', width: 120 },
|
|
||||||
{ title: 'Description', dataIndex: 'desc', key: 'desc' },
|
|
||||||
];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="endpoint-row">
|
|
||||||
<div class="endpoint-header">
|
|
||||||
<a-tag :color="tagColor" class="method-tag">{{ endpoint.method }}</a-tag>
|
|
||||||
<code class="endpoint-path">{{ endpoint.path }}</code>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p v-if="endpoint.summary" class="endpoint-summary" v-html="safeInlineHtml(endpoint.summary)"></p>
|
|
||||||
|
|
||||||
<div v-if="hasParams" class="endpoint-block">
|
|
||||||
<div class="block-label">Parameters</div>
|
|
||||||
<a-table :columns="paramColumns" :data-source="endpoint.params" :pagination="false" size="small" row-key="name" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="endpoint.body" class="endpoint-block">
|
|
||||||
<div class="block-label">Request body</div>
|
|
||||||
<CodeBlock :code="endpoint.body" lang="json" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="endpoint.response" class="endpoint-block">
|
|
||||||
<div class="block-label">Response</div>
|
|
||||||
<CodeBlock :code="endpoint.response" lang="json" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="endpoint.errorResponse" class="endpoint-block">
|
|
||||||
<div class="block-label error-label">Error response</div>
|
|
||||||
<CodeBlock :code="endpoint.errorResponse" lang="json" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.endpoint-row {
|
|
||||||
padding: 14px 0;
|
|
||||||
margin: 0;
|
|
||||||
transition: background 0.15s;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding-left: 8px;
|
|
||||||
padding-right: 8px;
|
|
||||||
margin-left: -8px;
|
|
||||||
margin-right: -8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.endpoint-row:hover {
|
|
||||||
background: rgba(128, 128, 128, 0.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
.endpoint-row + .endpoint-row {
|
|
||||||
border-top: 1px solid rgba(128, 128, 128, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.endpoint-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.method-tag {
|
|
||||||
font-weight: 700;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
min-width: 56px;
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 2px 8px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.endpoint-path {
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
||||||
font-size: 13.5px;
|
|
||||||
word-break: break-all;
|
|
||||||
color: rgba(0, 0, 0, 0.8);
|
|
||||||
background: rgba(128, 128, 128, 0.06);
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.endpoint-summary {
|
|
||||||
margin: 8px 0 0;
|
|
||||||
color: rgba(0, 0, 0, 0.6);
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: 13.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.endpoint-block {
|
|
||||||
margin-top: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-label {
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.6px;
|
|
||||||
color: rgba(0, 0, 0, 0.45);
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-label {
|
|
||||||
color: #cf222e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code-block {
|
|
||||||
background: rgba(128, 128, 128, 0.08);
|
|
||||||
border: 1px solid rgba(128, 128, 128, 0.15);
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
||||||
font-size: 12.5px;
|
|
||||||
line-height: 1.55;
|
|
||||||
margin: 0;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-word;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body.dark .endpoint-row:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .endpoint-row + .endpoint-row {
|
|
||||||
border-top-color: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .endpoint-path {
|
|
||||||
color: rgba(255, 255, 255, 0.82);
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .endpoint-summary {
|
|
||||||
color: rgba(255, 255, 255, 0.65);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .block-label {
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .error-label {
|
|
||||||
color: #ff7b72;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark .code-block {
|
|
||||||
background: rgba(255, 255, 255, 0.04);
|
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: rgba(255, 255, 255, 0.88);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,63 +1,3 @@
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
import {
|
|
||||||
DownOutlined,
|
|
||||||
RightOutlined,
|
|
||||||
} from '@ant-design/icons-vue';
|
|
||||||
import EndpointRow from './EndpointRow.vue';
|
|
||||||
import { safeInlineHtml } from './endpoints.js';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
section: { type: Object, required: true },
|
|
||||||
icon: { type: [Object, Function], default: null },
|
|
||||||
collapsed: { type: Boolean, default: false },
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['toggle']);
|
|
||||||
|
|
||||||
const endpointLabel = computed(() =>
|
|
||||||
props.section.endpoints.length === 1
|
|
||||||
? '1 endpoint'
|
|
||||||
: `${props.section.endpoints.length} endpoints`
|
|
||||||
);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<section :id="section.id" class="api-section">
|
|
||||||
<div class="section-header" @click="emit('toggle')">
|
|
||||||
<div class="section-header-left">
|
|
||||||
<DownOutlined v-if="!collapsed" class="collapse-icon" />
|
|
||||||
<RightOutlined v-else class="collapse-icon" />
|
|
||||||
<component v-if="icon" :is="icon" class="section-icon" />
|
|
||||||
<h2 class="section-title">{{ section.title }}</h2>
|
|
||||||
</div>
|
|
||||||
<span class="endpoint-count">{{ endpointLabel }}</span>
|
|
||||||
</div>
|
|
||||||
<p v-if="section.description && !collapsed" class="section-description" v-html="safeInlineHtml(section.description)"></p>
|
|
||||||
|
|
||||||
<div v-if="section.subHeader && !collapsed" class="sub-header-block">
|
|
||||||
<div class="block-label">Response headers</div>
|
|
||||||
<a-table
|
|
||||||
:columns="[{ title: 'Header', dataIndex: 'name', key: 'name', width: 240 }, { title: 'Description', dataIndex: 'desc', key: 'desc' }]"
|
|
||||||
:data-source="section.subHeader"
|
|
||||||
:pagination="false"
|
|
||||||
size="small"
|
|
||||||
row-key="name"
|
|
||||||
>
|
|
||||||
<template #bodyCell="{ column, text }">
|
|
||||||
<span v-if="column.dataIndex === 'desc'" v-html="safeInlineHtml(text)"></span>
|
|
||||||
<template v-else>{{ text }}</template>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-show="!collapsed" class="endpoints">
|
|
||||||
<EndpointRow v-for="(endpoint, idx) in section.endpoints" :key="idx" :endpoint="endpoint" />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.api-section {
|
.api-section {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid rgba(128, 128, 128, 0.12);
|
border: 1px solid rgba(128, 128, 128, 0.12);
|
||||||
|
|
@ -131,7 +71,7 @@ const endpointLabel = computed(() =>
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block-label {
|
.section-block-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
@ -148,9 +88,7 @@ const endpointLabel = computed(() =>
|
||||||
.endpoints > :first-child {
|
.endpoints > :first-child {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
body.dark .api-section {
|
body.dark .api-section {
|
||||||
background: #252526;
|
background: #252526;
|
||||||
border-color: rgba(255, 255, 255, 0.08);
|
border-color: rgba(255, 255, 255, 0.08);
|
||||||
|
|
@ -181,7 +119,7 @@ body.dark .section-description {
|
||||||
color: rgba(255, 255, 255, 0.7);
|
color: rgba(255, 255, 255, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.dark .block-label {
|
body.dark .section-block-label {
|
||||||
color: rgba(255, 255, 255, 0.55);
|
color: rgba(255, 255, 255, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -189,4 +127,3 @@ body.dark .endpoint-count {
|
||||||
color: rgba(255, 255, 255, 0.55);
|
color: rgba(255, 255, 255, 0.55);
|
||||||
background: rgba(255, 255, 255, 0.06);
|
background: rgba(255, 255, 255, 0.06);
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
90
frontend/src/pages/api-docs/EndpointSection.tsx
Normal file
90
frontend/src/pages/api-docs/EndpointSection.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue