fix:修复只读文件切换编辑文件时iframe重新加载问题

This commit is contained in:
xiaozhu
2026-08-13 17:24:55 +08:00
parent 9160175d51
commit bcddaac083
2 changed files with 51 additions and 48 deletions
@@ -478,52 +478,53 @@ export function ScriptWorkspace({
)} )}
</div> </div>
{/* 只读模式:显示只读编辑器 */} {/* 编辑器画布区域 - 始终渲染,保证 iframe 不重新加载 */}
{isReadOnlyMode ? ( <div className="editor-canvas-wrapper" style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
<div className="readonly-editor-container"> {/* 只读模式内容 - 用 CSS 控制显示/隐藏 */}
<div className="readonly-editor-banner"> <div style={{ display: isReadOnlyMode ? 'block' : 'none', height: '100%' }}>
<Icon name="lock" size={16} /> <div className="readonly-editor-container">
<span></span> <div className="readonly-editor-banner">
</div> <Icon name="lock" size={16} />
<div className="readonly-editor-content"> <span></span>
{readOnlyLoading ? ( </div>
<div className="readonly-editor-loading"> <div className="readonly-editor-content">
<span className="button-spinner button-spinner--blue" /> {readOnlyLoading ? (
<span>...</span> <div className="readonly-editor-loading">
</div> <span className="button-spinner button-spinner--blue" />
) : readOnlyError ? ( <span>...</span>
<div className="readonly-editor-error"> </div>
<Icon name="info" size={28} /> ) : readOnlyError ? (
<strong></strong> <div className="readonly-editor-error">
<p>{readOnlyError}</p> <Icon name="info" size={28} />
</div> <strong></strong>
) : script.script_type === 'notebook' && readOnlyContent && typeof readOnlyContent === 'object' ? ( <p>{readOnlyError}</p>
// Notebook 使用单元格渲染 </div>
<NotebookViewer content={readOnlyContent} /> ) : script.script_type === 'notebook' && readOnlyContent && typeof readOnlyContent === 'object' ? (
) : ( <NotebookViewer content={readOnlyContent} />
// Python 文件使用 Monaco Editor 显示 ) : (
<Editor <Editor
height="100%" height="100%"
language="python" language="python"
value={typeof readOnlyContent === 'string' ? readOnlyContent : ''} value={typeof readOnlyContent === 'string' ? readOnlyContent : ''}
theme="vs" theme="vs"
options={{ options={{
readOnly: true, readOnly: true,
domReadOnly: true, domReadOnly: true,
minimap: { enabled: true }, minimap: { enabled: true },
lineNumbers: "on", lineNumbers: "on",
folding: true, folding: true,
wordWrap: "on", wordWrap: "on",
contextmenu: false, contextmenu: false,
automaticLayout: true, automaticLayout: true,
}} }}
/> />
)} )}
</div>
</div> </div>
</div> </div>
) : (
// 正常编辑模式:原有的 iframe + Monaco 预览逻辑 {/* 正常编辑模式 - 始终渲染,用 CSS 控制显示/隐藏 */}
<div className={`editor-canvas ${sessionCache.size > 0 ? 'is-embedded' : ''}`} style={sessionCache.size > 0 ? { position: 'relative', minHeight: '0', height: '100%' } : undefined}> <div className={`editor-canvas ${sessionCache.size > 0 ? 'is-embedded' : ''}`} style={{ display: isReadOnlyMode ? 'none' : 'block', position: 'relative', minHeight: '0', height: '100%' }}>
{/* 多 PythonEditor 实例:每个有 buffer 的 python tab 都挂载,仅 active 可见 */} {/* 多 PythonEditor 实例:每个有 buffer 的 python tab 都挂载,仅 active 可见 */}
{pythonTabBuffers.map((tab) => { {pythonTabBuffers.map((tab) => {
const tabScript = scripts.find((s) => s.script_id === tab.scriptId); const tabScript = scripts.find((s) => s.script_id === tab.scriptId);
@@ -711,9 +712,10 @@ export function ScriptWorkspace({
</span> </span>
</div> </div>
</section> </section>
) : null):null} ) : null
) : null}
</div> </div>
)} </div>
</> </>
); );
} }
+3 -2
View File
@@ -2080,7 +2080,8 @@ button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
padding: 10px 16px; padding: 8px 16px;
margin-bottom: 6px;
background: #fff3cd; background: #fff3cd;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
color: #856404; color: #856404;
@@ -2151,7 +2152,7 @@ button {
} }
.notebook-cell--markdown { .notebook-cell--markdown {
padding: 14px 24px; padding: 4px 24px;
} }
.notebook-cell--code { .notebook-cell--code {