优化后台UI与开放文档排版设计

frontend/src/pages/OpenApiDocs.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
 import { Alert, Card, Descriptions, Table, Tag, Typography } from 'antd'
+import { BookOutlined } from '@ant-design/icons'
 import EndpointDoc, { CommonResponseDoc } from '../openapi/EndpointDoc'
 import {
   commonResponseFields,
@@ -180,6 +181,10 @@ export default function OpenApiDocs() {
     <div className="api-docs">
       {/* 左侧目录 */}
       <aside className="api-docs__toc">
+        <div className="api-docs__toc-header">
+          <BookOutlined style={{ color: '#2563eb', fontSize: 16 }} />
+          <span>文档章节目录</span>
+        </div>
         <nav className="api-docs__nav">
           {toc.map((group) => (
             <div className="api-docs__nav-group" key={group.title}>
@@ -330,21 +335,38 @@ function OverviewSection() {
           pagination={false}
           rowKey="mode"
           dataSource={deliveryModes}
+          scroll={{ x: 1080 }}
           columns={[
-            { title: '方式', dataIndex: 'mode', width: 130 },
-            { title: '适用场景', dataIndex: 'scene' },
+            {
+              title: '方式',
+              dataIndex: 'mode',
+              width: 140,
+              render: (v: string) => <span style={{ fontWeight: 700, whiteSpace: 'nowrap', color: '#0f172a' }}>{v}</span>,
+            },
+            {
+              title: '适用场景',
+              dataIndex: 'scene',
+              width: 280,
+              render: (v: string) => <span style={{ fontSize: 13, lineHeight: 1.6, display: 'block', color: '#334155' }}>{v}</span>,
+            },
             {
               title: '接口顺序',
               dataIndex: 'steps',
-              width: 250,
-              render: (v: string) => <pre className="api-docs__pre">{v}</pre>,
+              width: 240,
+              render: (v: string) => <pre className="api-docs__pre" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>{v}</pre>,
             },
             {
               title: '相关接口',
               dataIndex: 'interfaces',
-              render: (v: string) => <pre className="api-docs__pre">{v}</pre>,
+              width: 260,
+              render: (v: string) => <pre className="api-docs__pre" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>{v}</pre>,
+            },
+            {
+              title: '建议',
+              dataIndex: 'recommend',
+              width: 180,
+              render: (v: string) => <span style={{ fontSize: 13, lineHeight: 1.5, display: 'block', color: '#475569' }}>{v}</span>,
             },
-            { title: '建议', dataIndex: 'recommend', width: 170 },
           ]}
         />
       </Card>