.project-docs-page { height: calc(100vh - 64px); overflow: hidden; } .docs-layout { height: 100%; background: #fff; } .docs-sider { border-right: 1px solid #f0f0f0; height: 100%; overflow: hidden; display: flex; flex-direction: column; } .docs-sider-header { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; flex-direction: column; gap: 12px; background: #fff; } .docs-sider-header h2 { margin: 0; font-size: 16px; font-weight: 600; color: #262626; line-height: 1.5; } .docs-sider-actions { display: flex; gap: 8px; align-items: center; } .mode-toggle-btn { border-radius: 6px !important; font-weight: 500 !important; box-shadow: 0 2px 6px rgba(22, 119, 255, 0.2); background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%) !important; border: none !important; height: 32px !important; display: flex !important; align-items: center !important; padding: 0 12px !important; } .mode-toggle-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(22, 119, 255, 0.3); filter: brightness(1.1); } .docs-sider-actions .ant-btn:not(.mode-toggle-btn) { background: #f0f0f0; border: 1px solid #d9d9d9; border-radius: 6px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .docs-sider-actions .ant-btn-text:hover { background: #e6f4ff; border-color: #91caff; color: #1677ff; } .docs-menu { flex: 1; overflow-y: auto; border-right: none; } /* 修复文档名过长的显示问题 */ .docs-menu .ant-menu-title-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .docs-menu .ant-menu-item, .docs-menu .ant-menu-submenu-title { overflow: hidden; } .docs-content-layout { position: relative; height: 100%; background: #fff; } .docs-toc-sider { border-left: 1px solid #f0f0f0; background: #fafafa !important; height: 100%; overflow: hidden; display: flex; flex-direction: column; } .toc-header { padding: 16px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; background: #fff; } .toc-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, 0.85); } .toc-content { flex: 1; overflow-y: auto; overflow-x: auto; padding: 16px; } .toc-content .ant-anchor { padding-left: 0; padding-bottom: 65px; /* 给Anchor组件添加底部内边距,避免最后一项被遮挡 */ } .toc-content .ant-anchor-link { padding: 6px 0; } .toc-content .ant-anchor-link-title { font-size: 13px; color: rgba(0, 0, 0, 0.75); line-height: 1.5; white-space: nowrap; } .toc-content .ant-anchor-link-active>.ant-anchor-link-title { color: #1890ff; font-weight: 500; } .toc-empty { color: #999; text-align: center; margin-top: 40px; font-size: 13px; } .toc-toggle-btn { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 100; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .docs-content { height: 100%; overflow-y: auto; background: #fff; } .docs-content-wrapper { max-width: 900px; margin: 0 auto; padding: 24px; min-height: 100%; } /* PDF模式下使用全宽 */ .docs-content-wrapper.pdf-mode { max-width: 100%; padding: 0; height: 100%; display: flex; flex-direction: column; } .docs-loading { display: flex; justify-content: center; align-items: center; min-height: 400px; } .markdown-body { font-size: 16px; line-height: 1.6; color: #333; } .markdown-body h1 { font-size: 32px; font-weight: 600; margin-top: 24px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #eaecef; } .markdown-body h2 { font-size: 24px; font-weight: 600; margin-top: 24px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #eaecef; } .markdown-body h3 { font-size: 20px; font-weight: 600; margin-top: 20px; margin-bottom: 12px; } .markdown-body p { margin-bottom: 16px; } .markdown-body code { background-color: #f6f8fa; padding: 2px 6px; border-radius: 3px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 14px; } .markdown-body pre { background-color: #f6f8fa; padding: 16px; border-radius: 6px; overflow-x: auto; margin-bottom: 16px; } .markdown-body pre code { background-color: transparent; padding: 0; } .markdown-body blockquote { padding: 0 16px; border-left: 4px solid #dfe2e5; color: #6a737d; margin-bottom: 16px; } .markdown-body table { border-collapse: collapse; width: 100%; margin-bottom: 16px; } .markdown-body th, .markdown-body td { border: 1px solid #dfe2e5; padding: 8px 13px; } .markdown-body th { background-color: #f6f8fa; font-weight: 600; } .markdown-body img { max-width: 100%; height: auto; } .markdown-body a { color: #1677ff; text-decoration: none; } .markdown-body a:hover { text-decoration: underline; } .markdown-body ul, .markdown-body ol { margin-bottom: 16px; padding-left: 2em; } .markdown-body li { margin-bottom: 4px; }