From bbd8ba64a1b18f377b49ee914c6b4a16fb245201 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 5 Feb 2026 16:59:20 +0800
Subject: [PATCH] Feat: Control interface documentation directory display and
 hiding (#13008)

### What problem does this PR solve?

Feat: Control interface documentation directory display and hiding

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>
---
 .../chat-overview-modal/api-content.tsx       | 25 ++++++++++++++-----
 .../chat-overview-modal/markdown-toc.tsx      |  2 +-
 web/src/locales/en.ts                         |  2 ++
 web/src/locales/zh.ts                         |  2 ++
 .../pages/user-setting/setting-api/index.tsx  |  8 +-----
 5 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/web/src/components/api-service/chat-overview-modal/api-content.tsx b/web/src/components/api-service/chat-overview-modal/api-content.tsx
index bd645fe9d..be19e016b 100644
--- a/web/src/components/api-service/chat-overview-modal/api-content.tsx
+++ b/web/src/components/api-service/chat-overview-modal/api-content.tsx
@@ -1,5 +1,6 @@
 import { useIsDarkTheme } from '@/components/theme-provider';
-import { useSetModalState } from '@/hooks/common-hooks';
+import { Button } from '@/components/ui/button';
+import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { LangfuseCard } from '@/pages/user-setting/setting-model/langfuse';
 import apiDoc from '@parent/docs/references/http_api_reference.md?raw';
 import MarkdownPreview from '@uiw/react-markdown-preview';
@@ -8,21 +9,33 @@ import BackendServiceApi from './backend-service-api';
 import MarkdownToc from './markdown-toc';
 
 const ApiContent = ({ id, idKey }: { id?: string; idKey: string }) => {
+  const { t } = useTranslate('setting');
+
   const {
     visible: apiKeyVisible,
     hideModal: hideApiKeyModal,
     showModal: showApiKeyModal,
   } = useSetModalState();
 
+  const {
+    visible: tocVisible,
+    hideModal: hideToc,
+    showModal: showToc,
+  } = useSetModalState();
+
   const isDarkTheme = useIsDarkTheme();
 
   return (
-    <div className="pb-2">
-      <section className="flex flex-col gap-2 pb-5">
-        <BackendServiceApi show={showApiKeyModal}></BackendServiceApi>
-
+    <div className="pb-2 flex flex-col w-full">
+      <BackendServiceApi show={showApiKeyModal}></BackendServiceApi>
+      <div className="text-left py-4">
+        <Button onClick={tocVisible ? hideToc : showToc}>
+          {tocVisible ? t('hideToc') : t('showToc')}
+        </Button>
+      </div>
+      <section className="flex flex-col gap-2 pb-5 flex-1 min-h-0 overflow-auto mb-4">
         <div style={{ position: 'relative' }}>
-          <MarkdownToc content={apiDoc} />
+          {tocVisible && <MarkdownToc content={apiDoc} />}
         </div>
         <MarkdownPreview
           source={apiDoc}
diff --git a/web/src/components/api-service/chat-overview-modal/markdown-toc.tsx b/web/src/components/api-service/chat-overview-modal/markdown-toc.tsx
index 7234f5a8f..3141b5496 100644
--- a/web/src/components/api-service/chat-overview-modal/markdown-toc.tsx
+++ b/web/src/components/api-service/chat-overview-modal/markdown-toc.tsx
@@ -72,7 +72,7 @@ const MarkdownToc: React.FC<MarkdownTocProps> = ({ content }) => {
         padding: '10px',
         maxHeight: 'calc(100vh - 170px)',
         overflowY: 'auto',
-        zIndex: 1000,
+        zIndex: 100,
       }}
     >
       <Anchor items={items} />
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index 0986add12..6f1b30725 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -1320,6 +1320,8 @@ Example: Virtual Hosted Style`,
         image2text: 'OCR',
         speech2text: 'ASR',
       },
+      showToc: 'Show TOC',
+      hideToc: 'Hide TOC',
     },
     message: {
       registered: 'Registered!',
diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts
index 78ed72694..e7e3650c4 100644
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@@ -1143,6 +1143,8 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
         modelNameRequired: '模型名称为必填项',
         apiUrlRequired: 'PaddleOCR API URL 为必填项',
       },
+      showToc: '显示目录',
+      hideToc: '隐藏目录',
     },
     message: {
       registered: '注册成功',
diff --git a/web/src/pages/user-setting/setting-api/index.tsx b/web/src/pages/user-setting/setting-api/index.tsx
index 3bc187c65..d772a22d7 100644
--- a/web/src/pages/user-setting/setting-api/index.tsx
+++ b/web/src/pages/user-setting/setting-api/index.tsx
@@ -1,13 +1,7 @@
 import ApiContent from '@/components/api-service/chat-overview-modal/api-content';
 
-import styles from './index.module.less';
-
 const ApiPage = () => {
-  return (
-    <div className={styles.apiWrapper}>
-      <ApiContent idKey="dialogId"></ApiContent>
-    </div>
-  );
+  return <ApiContent idKey="dialogId"></ApiContent>;
 };
 
 export default ApiPage;