Skip to content

Commit 0766888

Browse files
yuluo-yxyuluo-yx
committed
fix
Signed-off-by: yuluo-yx <[email protected]>
1 parent 19e17ee commit 0766888

File tree

2 files changed

+96
-56
lines changed

2 files changed

+96
-56
lines changed

‎website/src/components/ZoomableMermaid/index.js‎

Lines changed: 44 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState, useRef, useEffect, useCallback } from 'react';
2+
import { createPortal } from 'react-dom';
23
import Mermaid from '@theme/Mermaid';
34
import styles from './styles.module.css';
45

@@ -67,6 +68,48 @@ const ZoomableMermaid = ({ children, title }) => {
6768
}
6869
};
6970

71+
const modalContent = (
72+
<div
73+
className={styles.modal}
74+
role="dialog"
75+
aria-modal="true"
76+
aria-labelledby={title ? "modal-title" : undefined}
77+
aria-describedby="modal-description"
78+
>
79+
<div
80+
className={styles.modalContent}
81+
ref={modalRef}
82+
tabIndex={-1}
83+
>
84+
<div className={styles.modalHeader}>
85+
{title && (
86+
<h3 id="modal-title" className={styles.modalTitle}>
87+
{title}
88+
</h3>
89+
)}
90+
<button
91+
className={styles.closeButton}
92+
onClick={closeModal}
93+
aria-label="关闭放大视图"
94+
type="button"
95+
>
96+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
97+
<line x1="18" y1="6" x2="6" y2="18"/>
98+
<line x1="6" y1="6" x2="18" y2="18"/>
99+
</svg>
100+
</button>
101+
</div>
102+
<div
103+
className={styles.modalBody}
104+
id="modal-description"
105+
aria-label="放大的 Mermaid 图表"
106+
>
107+
<Mermaid value={children} />
108+
</div>
109+
</div>
110+
</div>
111+
);
112+
70113
return (
71114
<>
72115
<div
@@ -93,47 +136,7 @@ const ZoomableMermaid = ({ children, title }) => {
93136
<Mermaid value={children} />
94137
</div>
95138

96-
{isModalOpen && (
97-
<div
98-
className={styles.modal}
99-
role="dialog"
100-
aria-modal="true"
101-
aria-labelledby={title ? "modal-title" : undefined}
102-
aria-describedby="modal-description"
103-
>
104-
<div
105-
className={styles.modalContent}
106-
ref={modalRef}
107-
tabIndex={-1}
108-
>
109-
<div className={styles.modalHeader}>
110-
{title && (
111-
<h3 id="modal-title" className={styles.modalTitle}>
112-
{title}
113-
</h3>
114-
)}
115-
<button
116-
className={styles.closeButton}
117-
onClick={closeModal}
118-
aria-label="关闭放大视图"
119-
type="button"
120-
>
121-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
122-
<line x1="18" y1="6" x2="6" y2="18"/>
123-
<line x1="6" y1="6" x2="18" y2="18"/>
124-
</svg>
125-
</button>
126-
</div>
127-
<div
128-
className={styles.modalBody}
129-
id="modal-description"
130-
aria-label="放大的 Mermaid 图表"
131-
>
132-
<Mermaid value={children} />
133-
</div>
134-
</div>
135-
</div>
136-
)}
139+
{isModalOpen && createPortal(modalContent, document.body)}
137140
</>
138141
);
139142
};

‎website/src/components/ZoomableMermaid/styles.module.css‎

Lines changed: 52 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -53,24 +53,27 @@
5353
left: 0;
5454
right: 0;
5555
bottom: 0;
56-
background: rgba(0, 0, 0, 0.8);
56+
width: 100vw;
57+
height: 100vh;
58+
background: rgba(0, 0, 0, 0.9);
5759
backdrop-filter: blur(5px);
5860
display: flex;
5961
align-items: center;
6062
justify-content: center;
61-
z-index: 9999;
62-
padding: 20px;
63+
z-index: 99999;
64+
padding: 0;
6365
animation: fadeIn 0.3s ease;
6466
}
6567

6668
.modalContent {
6769
background: var(--tech-card-bg);
6870
border-radius: 16px;
69-
max-width: 95vw;
70-
max-height: 95vh;
71-
width: 100%;
71+
width: 95vw;
72+
height: 95vh;
73+
max-width: none;
74+
max-height: none;
7275
overflow: hidden;
73-
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
76+
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
7477
border: 1px solid var(--tech-border);
7578
display: flex;
7679
flex-direction: column;
@@ -128,22 +131,27 @@
128131
align-items: center;
129132
justify-content: center;
130133
min-height: 0;
134+
background: var(--tech-surface-bg);
131135
}
132136

133137
.modalBody .mermaid {
134138
background: transparent !important;
135139
border: none !important;
136140
box-shadow: none !important;
137-
max-width: 100%;
138-
max-height: 100%;
141+
max-width: none !important;
142+
max-height: none !important;
139143
margin: 0 !important;
140144
padding: 0 !important;
145+
transform: scale(1.5);
146+
transform-origin: center;
141147
}
142148

143149
/* Ensure Mermaid diagrams in modal are properly sized */
144150
.modalBody .mermaid svg {
145-
max-width: 100% !important;
151+
max-width: none !important;
152+
width: auto !important;
146153
height: auto !important;
154+
display: block !important;
147155
}
148156

149157
@keyframes fadeIn {
@@ -173,23 +181,47 @@
173181
}
174182

175183
[data-theme='dark'] .modal {
176-
background: rgba(0, 0, 0, 0.9);
184+
background: rgba(0, 0, 0, 0.95);
185+
}
186+
187+
/* Override any potential Docusaurus container constraints */
188+
.modal {
189+
position: fixed !important;
190+
top: 0 !important;
191+
left: 0 !important;
192+
right: 0 !important;
193+
bottom: 0 !important;
194+
width: 100vw !important;
195+
height: 100vh !important;
196+
margin: 0 !important;
197+
padding: 0 !important;
198+
z-index: 99999 !important;
199+
}
200+
201+
.modalContent {
202+
position: relative !important;
203+
margin: auto !important;
177204
}
178205

179206
/* Mobile responsive */
180207
@media (max-width: 768px) {
181208
.modal {
182-
padding: 10px;
209+
padding: 0;
210+
width: 100vw;
211+
height: 100vh;
183212
}
184213

185214
.modalContent {
186-
max-width: 100%;
187-
max-height: 100%;
188-
border-radius: 12px;
215+
width: 100vw;
216+
height: 100vh;
217+
max-width: none;
218+
max-height: none;
219+
border-radius: 0;
189220
}
190221

191222
.modalHeader {
192223
padding: 16px 20px 12px;
224+
flex-shrink: 0;
193225
}
194226

195227
.modalTitle {
@@ -198,6 +230,11 @@
198230

199231
.modalBody {
200232
padding: 16px;
233+
flex: 1;
234+
}
235+
236+
.modalBody .mermaid {
237+
transform: scale(1.2);
201238
}
202239

203240
.zoomHint {

0 commit comments

Comments
 (0)