mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-05 12:44:22 +00:00
4e7cecb71b
Every panel page CSS file repeated the same wrapper boilerplate — the --bg-page/--bg-card token triples for light/dark/ultra-dark, the min-height + background root rule, the .ant-layout transparent reset, the .content-shell transparent reset, and the .loading-spacer min-height. That's ~30 identical lines duplicated across IndexPage, ClientsPage, InboundsPage, XrayPage, SettingsPage, NodesPage, and ApiDocsPage. Move all of it into styles/page-shell.css and import it once from main.tsx alongside utils.css and page-cards.css. Each page CSS file now only contains genuinely page-specific rules (content-area padding overrides, page-specific tokens like ApiDocs's Swagger --sw-* set). Also drop the per-page `import '@/styles/page-cards.css'` statements from the 7 page tsx files now that main.tsx loads it globally. Net: -211 deleted, +6 inserted in the touched files, plus the new page-shell.css. .zero-margin (Divider override used by Nord/Warp modals) folded into utils.css alongside the margin classes.
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { ConfigProvider, Layout } from 'antd';
|
|
import SwaggerUI from 'swagger-ui-react';
|
|
import 'swagger-ui-react/swagger-ui.css';
|
|
|
|
import { useTheme } from '@/hooks/useTheme';
|
|
import AppSidebar from '@/components/AppSidebar';
|
|
import './ApiDocsPage.css';
|
|
|
|
const basePath = window.X_UI_BASE_PATH || '';
|
|
const openApiUrl = `${basePath}panel/api/openapi.json`;
|
|
|
|
export default function ApiDocsPage() {
|
|
const { isDark, isUltra, antdThemeConfig } = useTheme();
|
|
|
|
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 />
|
|
|
|
<Layout className="content-shell">
|
|
<Layout.Content className="content-area">
|
|
<div className="docs-wrapper">
|
|
<SwaggerUI
|
|
url={openApiUrl}
|
|
docExpansion="list"
|
|
deepLinking={false}
|
|
tryItOutEnabled
|
|
/>
|
|
</div>
|
|
</Layout.Content>
|
|
</Layout>
|
|
</Layout>
|
|
</ConfigProvider>
|
|
);
|
|
}
|