feat(api-docs): enhance in-panel API documentation (#4312)

* feat(api-docs): enhance API documentation with missing endpoints, search, collapse, and route sync test

- Add 29 undocumented routes across 4 new sections (Settings, Xray Settings,
  Subscription Server, WebSocket) plus 4 missing Server API endpoints
- Fix inaccuracies: history metric keys, node metric keys, VLESS enc description
- Add response schemas to 15+ key endpoints
- Add search bar and expand/collapse all controls to the docs page
- Add collapsible endpoint sections with endpoint count
- Add Go test (TestAPIRoutesDocumented) to verify all Go routes are documented

* feat(api-docs): add JSON syntax highlighting and top-right copy button to code blocks

* fix(api-docs): use distinct colors for JSON syntax highlighting (green strings, amber numbers)

* feat(api-docs): add request body examples, error responses, WebSocket message types, and subscription response headers

* fix(api-docs): use ClipboardManager.copyText instead of copy to fix API token copy button

frontend/src/pages/api-docs/EndpointSection.vue

@@ -1,16 +1,55 @@
 <script setup>
+import { computed } from 'vue';
+import {
+  DownOutlined,
+  RightOutlined,
+} from '@ant-design/icons-vue';
 import EndpointRow from './EndpointRow.vue';
+import { safeInlineHtml } from './endpoints.js';
 
-defineProps({
+const props = defineProps({
   section: { type: Object, required: true },
+  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">
-    <h2 class="section-title">{{ section.title }}</h2>
-    <p v-if="section.description" class="section-description">{{ section.description }}</p>
-    <div class="endpoints">
+    <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" />
+        <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>
@@ -21,11 +60,35 @@ defineProps({
   background: #fff;
   border: 1px solid rgba(128, 128, 128, 0.15);
   border-radius: 8px;
-  padding: 20px 24px;
-  margin-bottom: 20px;
+  padding: 16px 24px;
+  margin-bottom: 16px;
   scroll-margin-top: 16px;
 }
 
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+}
+
+.section-header:hover .collapse-icon {
+  color: #1677ff;
+}
+
+.section-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.collapse-icon {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  transition: color 0.2s;
+}
+
 .section-title {
   font-size: 20px;
   font-weight: 600;
@@ -33,12 +96,36 @@ defineProps({
   color: rgba(0, 0, 0, 0.88);
 }
 
+.endpoint-count {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  white-space: nowrap;
+}
+
 .section-description {
-  margin: 6px 0 14px;
+  margin: 10px 0 14px;
   color: rgba(0, 0, 0, 0.65);
   line-height: 1.55;
 }
 
+.sub-header-block {
+  margin-bottom: 14px;
+}
+
+.block-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: rgba(0, 0, 0, 0.5);
+  margin-bottom: 6px;
+}
+
+.endpoints {
+  padding-top: 8px;
+  border-top: 1px solid rgba(128, 128, 128, 0.1);
+}
+
 .endpoints > :first-child {
   padding-top: 0;
 }
@@ -62,4 +149,8 @@ body.dark .section-title {
 body.dark .section-description {
   color: rgba(255, 255, 255, 0.7);
 }
+
+body.dark .block-label {
+  color: rgba(255, 255, 255, 0.55);
+}
 </style>