feat(panel): in-panel API documentation page

New /panel/api-docs route with a one-page reference covering every
/panel/api/* endpoint (Auth, Inbounds, Server, Nodes, Custom Geo,
Backup) plus a Bearer-token primer that reads the current token and
exposes Show/Copy/Regenerate inline. Sidebar gets an API Docs entry
right after Xray; the menu label is shared via menu.apiDocs across all
13 locales.

frontend/src/components/AppSidebar.vue

@@ -10,6 +10,7 @@ import {
   LogoutOutlined,
   CloseOutlined,
   MenuOutlined,
+  ApiOutlined,
 } from '@ant-design/icons-vue';
 
 import { theme, currentTheme, toggleTheme, toggleUltra, pauseAnimationsUntilLeave } from '@/composables/useTheme.js';
@@ -19,17 +20,12 @@ const { t } = useI18n();
 const SIDEBAR_COLLAPSED_KEY = 'isSidebarCollapsed';
 
 const props = defineProps({
-  // Path prefix (e.g. /custom-base/) the panel is served under. Defaults
-  // to '' which means tab keys end up as '/panel/...'. Pages pass the
-  // value the Go backend gave them (in production via a meta tag).
   basePath: { type: String, default: '' },
   // Current request URI so the matching menu item highlights.
   requestUri: { type: String, default: '' },
 });
 
-// AD-Vue 4 dropped <a-icon :type="x"> in favor of explicit icon
-// imports — keep a small name-to-component map so tab definitions stay
-// declarative.
+
 const iconByName = {
   dashboard: DashboardOutlined,
   user: UserOutlined,
@@ -37,41 +33,26 @@ const iconByName = {
   tool: ToolOutlined,
   cluster: ClusterOutlined,
   logout: LogoutOutlined,
+  apidocs: ApiOutlined,
 };
 
-// basePath comes from Go (`/` by default, `/myprefix/` when configured) so
-// these concatenations land on absolute paths. In dev we synthesize the prop
-// from a window global which can be empty — force a leading slash so the
-// browser doesn't resolve the link relative to the current pathname (which
-// would turn /panel/settings + 'panel/...' into /panel/panel/...).
 const prefix = props.basePath?.startsWith('/') ? props.basePath : `/${props.basePath || ''}`;
 
-// Labels are i18n-driven so the sidebar matches the locale picked
-// in panel settings without a page reload of the sidebar component.
 const tabs = computed(() => [
   { key: `${prefix}panel/`, icon: 'dashboard', title: t('menu.dashboard') },
   { key: `${prefix}panel/inbounds`, icon: 'user', title: t('menu.inbounds') },
   { 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: `${prefix}logout`, icon: 'logout', title: t('logout') },
 ]);
 
-// Logout sits in its own pinned-to-bottom block on the drawer; the
-// remaining items are the navigation proper. The full-height sider on
-// desktop still uses `tabs` as-is so the desktop look is unchanged.
 const navTabs = computed(() => tabs.value.filter((tab) => tab.icon !== 'logout'));
 const utilTabs = computed(() => tabs.value.filter((tab) => tab.icon === 'logout'));
-
 const activeTab = ref([props.requestUri]);
-
 const drawerOpen = ref(false);
 const collapsed = ref(JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY) || 'false'));
-
-// Drawer width is capped against the viewport — AD-Vue's default 378px
-// overflows on narrow phones (e.g. 360px portrait), leaving the page
-// hidden behind the mask. `min()` keeps it sane on both phones and
-// tablets while never exceeding 320px on larger displays.
 const drawerWidth = 'min(82vw, 320px)';
 
 function openLink(key) {
@@ -98,12 +79,6 @@ function closeDrawer() {
   drawerOpen.value = false;
 }
 
-/* 3-state theme cycle driven by the brand-row icon button.
- *   Light  → Dark   (turn dark on, ensure ultra off)
- *   Dark   → Ultra  (turn ultra on)
- *   Ultra  → Light  (turn ultra off, turn dark off)
- * Using a single button keeps the sider header clean — the old
- * ThemeSwitch a-sub-menu plus its expandable items lived here. */
 function cycleTheme() {
   pauseAnimationsUntilLeave('theme-cycle');
   if (!theme.isDark) {
@@ -212,13 +187,6 @@ function cycleTheme() {
 </template>
 
 <style scoped>
-/* Pin the desktop sider to the viewport. Without this, AD-Vue's
- * `<a-layout-sider>` stretches to match the flex row's height — which
- * equals the page height on tall dashboards (cards stack into one
- * column below `lg` = 992px), so the bottom-anchored
- * `.ant-layout-sider-trigger` (and Logout right above it) slide off
- * the screen. Sticky + 100vh keeps the sider exactly viewport-tall;
- * `align-self: flex-start` stops the flex row from re-stretching it. */
 .ant-sidebar>.ant-layout-sider {
   position: sticky;
   top: 0;
@@ -226,12 +194,6 @@ function cycleTheme() {
   align-self: flex-start;
 }
 
-/* `.sider-brand` and `.drawer-brand` share the same light-theme colour
- * but differ in layout — the sider one is centered with its own
- * top-of-sidebar padding + border, the drawer one sits inside a flex
- * header next to the close button. Dark/ultra colour overrides live
- * in the non-scoped block at the bottom (theme classes attach to
- * body / html). */
 .sider-brand,
 .drawer-brand {
   font-weight: 600;
@@ -359,31 +321,15 @@ function cycleTheme() {
   font-size: 16px;
 }
 
-/* Push the utility (Logout) block to the bottom of the flex-column
- * drawer body and separate it from the nav block with a hairline. The
- * border colour is theme-neutral so it reads on both light and dark. */
 .drawer-utility {
   margin-top: auto;
   border-top: 1px solid rgba(128, 128, 128, 0.15);
 }
 
-/* Pin Logout exactly above AD-Vue's `.ant-layout-sider-trigger` (the
- * collapse bar at the bottom, position: absolute; height: 48px). The
- * old `margin-top: auto` approach only pushed the utility down when the
- * content was shorter than the container — on short viewports the
- * Logout got hidden behind the trigger. Switching to a flex layout
- * where `.sider-nav` consumes all spare space (flex: 1) and
- * `.sider-utility` stays at content height pins it consistently. The
- * padding-bottom: 48px on the parent reserves the trigger's strip so
- * Logout sits directly above it.
- *
- * The mobile @media rule below still hides the whole sider on phones;
- * this block only kicks in once that override no longer matches. */
 .ant-sidebar>.ant-layout-sider :deep(.ant-layout-sider-children) {
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding-bottom: 48px;
 }
 
 .sider-brand {
@@ -407,9 +353,6 @@ function cycleTheme() {
     display: inline-flex;
   }
 
-  /* On mobile the drawer is the menu — hide the inline sider's content
-   * + the collapse trigger so the sider stops taking layout space and
-   * leaves no remnant button next to the page. */
   .ant-sidebar>.ant-layout-sider :deep(.ant-layout-sider-children),
   .ant-sidebar>.ant-layout-sider :deep(.ant-layout-sider-trigger) {
     display: none;
@@ -425,13 +368,6 @@ function cycleTheme() {
 </style>
 
 <style>
-/* Non-scoped so the rules survive AD-Vue teleporting the drawer body
- * outside the AppSidebar element's scope id. Without this the Vue
- * `:global(body.dark) .drawer-brand` form did not produce the expected
- * `body.dark .drawer-brand[data-v-xxx]` selector reliably, and the
- * drawer brand stayed at the light-theme dark colour on the navy
- * drawer surface. Class names are specific enough that no collision is
- * expected; AppSidebar owns the only drawer in the app. */
 body.dark .drawer-brand,
 body.dark .sider-brand {
   color: rgba(255, 255, 255, 0.92);
@@ -450,11 +386,6 @@ html[data-theme='ultra-dark'] .drawer-close {
   color: rgba(255, 255, 255, 0.85);
 }
 
-/* Force a visible icon colour on the theme cycle button across themes.
- * The scoped `color: inherit` previously relied on parent chain to
- * cascade — fine on the desktop sider where `.sider-brand` is themed,
- * but inside the teleported drawer body the cascade didn't reach and
- * the icon merged into the dark background on mobile. */
 body.dark .theme-cycle {
   color: rgba(255, 255, 255, 0.85);
 }
@@ -463,14 +394,6 @@ html[data-theme='ultra-dark'] .theme-cycle {
   color: rgba(255, 255, 255, 0.92);
 }
 
-/* Pin the drawer surface to the same colour the desktop sider uses
- * (Layout.colorBgHeader / Menu.colorItemBg from useTheme.js) so the
- * header, empty body region, and menu items read as one continuous
- * panel. AD-Vue's CSS-in-JS tokens otherwise leave the drawer at
- * colorBgElevated (#2d2d30 in dark) which clashes with the #252526
- * menu rows. `!important` is required to beat the CSS-in-JS rule
- * specificity; AppSidebar owns the only drawer in the app so this
- * doesn't collide with anything else. */
 body.dark .ant-drawer .ant-drawer-content,
 body.dark .ant-drawer .ant-drawer-body {
   background: #252526 !important;
@@ -481,14 +404,6 @@ html[data-theme='ultra-dark'] .ant-drawer .ant-drawer-body {
   background: #0a0a0a !important;
 }
 
-/* Force the same light-blue tint on selected + hover/active across
- * all three themes. AD-Vue's defaults read too subtle on the dark
- * sider, and the light-theme variant looked inconsistent vs. dark —
- * applying the same RGBA tint over all backgrounds gives the active
- * page the same visual weight everywhere. `!important` is required to
- * beat AD-Vue's CSS-in-JS specificity; scoped to .sider-nav /
- * .sider-utility / .drawer-menu so only the navigation menus pick up
- * the override (other a-menu instances keep AD-Vue defaults). */
 .sider-nav .ant-menu-item-selected,
 .sider-utility .ant-menu-item-selected,
 .drawer-menu .ant-menu-item-selected {