From 823872d294708eb5acb94b857a5a5ae44fad0252 Mon Sep 17 00:00:00 2001
From: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Date: Wed, 6 Aug 2025 11:19:47 +0800
Subject: [PATCH] Fix API documentation layout and dark mode contrast issues
 (#23462)

---
 web/app/(commonLayout)/datasets/Datasets.tsx  |  2 +-
 web/app/(commonLayout)/datasets/Doc.tsx       |  4 +-
 .../datasets/template/template.en.mdx         | 80 +++++++++---------
 .../datasets/template/template.ja.mdx         | 74 ++++++++---------
 .../datasets/template/template.zh.mdx         | 82 +++++++++----------
 web/app/components/develop/doc.tsx            |  4 +-
 web/global.d.ts                               |  5 ++
 7 files changed, 128 insertions(+), 123 deletions(-)

diff --git a/web/app/(commonLayout)/datasets/Datasets.tsx b/web/app/(commonLayout)/datasets/Datasets.tsx
index 2d4848e92..18a31d8e8 100644
--- a/web/app/(commonLayout)/datasets/Datasets.tsx
+++ b/web/app/(commonLayout)/datasets/Datasets.tsx
@@ -36,7 +36,7 @@ const getKey = (
 }
 
 type Props = {
-  containerRef: React.RefObject<HTMLDivElement>
+  containerRef: React.RefObject<HTMLDivElement | null>
   tags: string[]
   keywords: string
   includeAll: boolean
diff --git a/web/app/(commonLayout)/datasets/Doc.tsx b/web/app/(commonLayout)/datasets/Doc.tsx
index 042a90f4a..78f767dbe 100644
--- a/web/app/(commonLayout)/datasets/Doc.tsx
+++ b/web/app/(commonLayout)/datasets/Doc.tsx
@@ -87,7 +87,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
       <div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
         {isTocExpanded
           ? (
-            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-components-panel-bg p-4 shadow-md">
+            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-4 shadow-md">
               <div className="mb-4 flex items-center justify-between">
                 <h3 className="text-lg font-semibold text-text-primary">{t('appApi.develop.toc')}</h3>
                 <button
@@ -115,7 +115,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
           : (
             <button
               onClick={() => setIsTocExpanded(true)}
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
+              className="flex h-10 w-10 items-center justify-center rounded-full border border-components-panel-border bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
             >
               <RiListUnordered className="h-6 w-6 text-components-button-secondary-text" />
             </button>
diff --git a/web/app/(commonLayout)/datasets/template/template.en.mdx b/web/app/(commonLayout)/datasets/template/template.en.mdx
index ebb2e6a80..f1bb5d915 100644
--- a/web/app/(commonLayout)/datasets/template/template.en.mdx
+++ b/web/app/(commonLayout)/datasets/template/template.en.mdx
@@ -25,7 +25,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </CodeGroup>
 </div>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-text'
@@ -163,7 +163,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-file'
@@ -294,7 +294,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
@@ -400,7 +400,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
@@ -472,7 +472,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
@@ -553,7 +553,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
@@ -714,7 +714,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
@@ -751,7 +751,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-text'
@@ -853,7 +853,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-file'
@@ -952,7 +952,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{batch}/indexing-status'
@@ -1007,7 +1007,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
@@ -1047,7 +1047,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents'
@@ -1122,7 +1122,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
@@ -1245,7 +1245,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 ___
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/status/{action}'
@@ -1302,7 +1302,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
@@ -1388,7 +1388,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
@@ -1476,7 +1476,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
@@ -1546,7 +1546,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
@@ -1590,7 +1590,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
@@ -1679,7 +1679,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
@@ -1750,7 +1750,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
@@ -1827,7 +1827,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
@@ -1873,7 +1873,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
@@ -1947,7 +1947,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/upload-file'
@@ -1998,7 +1998,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/retrieve'
@@ -2177,7 +2177,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
@@ -2224,7 +2224,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
@@ -2273,7 +2273,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
@@ -2306,7 +2306,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/built-in/{action}'
@@ -2339,7 +2339,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/metadata'
@@ -2378,7 +2378,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
@@ -2424,7 +2424,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
  
 <Heading
  url='/workspaces/current/models/model-types/text-embedding'
@@ -2528,7 +2528,7 @@ ___
    </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 Okay, I will translate the Chinese text in your document while keeping all formatting and code content unchanged.
 
 <Heading
@@ -2574,7 +2574,7 @@ Okay, I will translate the Chinese text in your document while keeping all forma
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
@@ -2615,7 +2615,7 @@ Okay, I will translate the Chinese text in your document while keeping all forma
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
@@ -2662,7 +2662,7 @@ Okay, I will translate the Chinese text in your document while keeping all forma
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Heading
@@ -2704,7 +2704,7 @@ Okay, I will translate the Chinese text in your document while keeping all forma
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/binding'
@@ -2746,7 +2746,7 @@ Okay, I will translate the Chinese text in your document while keeping all forma
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/unbinding'
@@ -2789,7 +2789,7 @@ Okay, I will translate the Chinese text in your document while keeping all forma
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/<uuid:dataset_id>/tags'
@@ -2837,7 +2837,7 @@ Okay, I will translate the Chinese text in your document while keeping all forma
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Row>
diff --git a/web/app/(commonLayout)/datasets/template/template.ja.mdx b/web/app/(commonLayout)/datasets/template/template.ja.mdx
index 6c0e20e1b..3011cecbc 100644
--- a/web/app/(commonLayout)/datasets/template/template.ja.mdx
+++ b/web/app/(commonLayout)/datasets/template/template.ja.mdx
@@ -25,7 +25,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </CodeGroup>
 </div>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-text'
@@ -163,7 +163,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-file'
@@ -294,7 +294,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
@@ -399,7 +399,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
@@ -471,7 +471,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
@@ -508,7 +508,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-text'
@@ -610,7 +610,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-file'
@@ -709,7 +709,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{batch}/indexing-status'
@@ -764,7 +764,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
@@ -804,7 +804,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents'
@@ -879,7 +879,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
@@ -1002,7 +1002,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 ___
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Heading
@@ -1060,7 +1060,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
@@ -1146,7 +1146,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
@@ -1234,7 +1234,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
@@ -1304,7 +1304,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   method='DELETE'
@@ -1347,7 +1347,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   method='POST'
@@ -1435,7 +1435,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
@@ -1506,7 +1506,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
@@ -1583,7 +1583,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
@@ -1629,7 +1629,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
@@ -1703,7 +1703,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/upload-file'
@@ -1754,7 +1754,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/retrieve'
@@ -1933,7 +1933,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
@@ -1980,7 +1980,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
@@ -2029,7 +2029,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
@@ -2062,7 +2062,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/built-in/{action}'
@@ -2095,7 +2095,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/metadata'
@@ -2136,7 +2136,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
@@ -2182,7 +2182,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 <Heading
   url='/datasets/tags'
   method='POST'
@@ -2226,7 +2226,7 @@ ___
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
@@ -2267,7 +2267,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
@@ -2314,7 +2314,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Heading
@@ -2356,7 +2356,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/binding'
@@ -2398,7 +2398,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/unbinding'
@@ -2441,7 +2441,7 @@ ___
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/<uuid:dataset_id>/tags'
@@ -2489,7 +2489,7 @@ ___
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Row>
   <Col>
diff --git a/web/app/(commonLayout)/datasets/template/template.zh.mdx b/web/app/(commonLayout)/datasets/template/template.zh.mdx
index c21ce3bf5..b7ea889a4 100644
--- a/web/app/(commonLayout)/datasets/template/template.zh.mdx
+++ b/web/app/(commonLayout)/datasets/template/template.zh.mdx
@@ -25,7 +25,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </CodeGroup>
 </div>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-text'
@@ -167,7 +167,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/document/create-by-file'
@@ -298,7 +298,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
@@ -403,7 +403,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets'
@@ -475,7 +475,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
@@ -556,7 +556,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
@@ -721,7 +721,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}'
@@ -758,7 +758,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-text'
@@ -860,7 +860,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/update-by-file'
@@ -959,7 +959,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{batch}/indexing-status'
@@ -1014,7 +1014,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
@@ -1054,7 +1054,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents'
@@ -1129,7 +1129,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}'
@@ -1252,7 +1252,7 @@ import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstructi
   </Col>
 </Row>
 ___
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Heading
@@ -1310,7 +1310,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
@@ -1396,7 +1396,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments'
@@ -1484,7 +1484,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
@@ -1528,7 +1528,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}'
@@ -1598,7 +1598,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   method='POST'
@@ -1687,7 +1687,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
@@ -1758,7 +1758,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks'
@@ -1835,7 +1835,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
@@ -1881,7 +1881,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Row>
   <Col>
@@ -1915,7 +1915,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/segments/{segment_id}/child_chunks/{child_chunk_id}'
@@ -1989,7 +1989,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/{document_id}/upload-file'
@@ -2040,7 +2040,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/retrieve'
@@ -2219,7 +2219,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
@@ -2266,7 +2266,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
@@ -2315,7 +2315,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/{metadata_id}'
@@ -2348,7 +2348,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata/built-in/{action}'
@@ -2381,7 +2381,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/documents/metadata'
@@ -2422,7 +2422,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/{dataset_id}/metadata'
@@ -2468,7 +2468,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
  
 <Heading
  url='/workspaces/current/models/model-types/text-embedding'
@@ -2572,7 +2572,7 @@ ___
    </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
@@ -2617,7 +2617,7 @@ ___
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
@@ -2658,7 +2658,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags'
@@ -2705,7 +2705,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 
 <Heading
@@ -2747,7 +2747,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/binding'
@@ -2789,7 +2789,7 @@ ___
   </Col>
 </Row>
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/tags/unbinding'
@@ -2832,7 +2832,7 @@ ___
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Heading
   url='/datasets/<uuid:dataset_id>/tags'
@@ -2880,7 +2880,7 @@ ___
 </Row>
 
 
-<hr className='ml-0 mr-0' />
+<hr style={{ marginLeft: 0, marginRight: 0, width: '100%', maxWidth: '100%' }} />
 
 <Row>
   <Col>
diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx
index 65e6d4aec..806ee7272 100644
--- a/web/app/components/develop/doc.tsx
+++ b/web/app/components/develop/doc.tsx
@@ -87,7 +87,7 @@ const Doc = ({ appDetail }: IDocProps) => {
       <div className={`fixed right-8 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
         {isTocExpanded
           ? (
-            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-components-panel-bg p-4 shadow-md">
+            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg border border-components-panel-border bg-components-panel-bg p-4 shadow-md">
               <div className="mb-4 flex items-center justify-between">
                 <h3 className="text-lg font-semibold text-text-primary">{t('appApi.develop.toc')}</h3>
                 <button
@@ -115,7 +115,7 @@ const Doc = ({ appDetail }: IDocProps) => {
           : (
             <button
               onClick={() => setIsTocExpanded(true)}
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
+              className="flex h-10 w-10 items-center justify-center rounded-full border border-components-panel-border bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
             >
               <RiListUnordered className="h-6 w-6 text-components-button-secondary-text" />
             </button>
diff --git a/web/global.d.ts b/web/global.d.ts
index c2d1c96d4..7fbe20421 100644
--- a/web/global.d.ts
+++ b/web/global.d.ts
@@ -3,3 +3,8 @@ declare module 'lamejs/src/js/MPEGMode';
 declare module 'lamejs/src/js/Lame';
 declare module 'lamejs/src/js/BitStream';
 declare module 'react-18-input-autosize';
+
+declare module '*.mdx' {
+  let MDXComponent: (props: any) => JSX.Element
+  export default MDXComponent
+}