fix(frontend): 版本对比左栏不显示——根因monaco 0.56 createDiffEditor在抽屉嵌套容器里分栏测量错误(original栏恒被压36px;时序延迟挂载/layout强制重算/禁拖拽分栏/内联模式四招全试均无效,实测panes 36/748);换双只读编辑器并排各50%(快照|当前,带栏头标签+滚动联动),复用主编辑器同款主题;showDiff延迟360ms等抽屉动画后挂载(容器全宽创建);dev实测panes 408/407左右内容正确 [nas]
This commit is contained in:
@@ -139,6 +139,7 @@ function runBacktest(): void {
|
||||
const versions = ref<CodeVersion[]>([])
|
||||
const versionsOpen = ref(false)
|
||||
const diffCode = ref<string | null>(null)
|
||||
const diffReady = ref(false)
|
||||
const versionsLoading = ref(false)
|
||||
|
||||
async function openVersions(): Promise<void> {
|
||||
@@ -146,6 +147,7 @@ async function openVersions(): Promise<void> {
|
||||
versionsOpen.value = true
|
||||
versionsLoading.value = true
|
||||
diffCode.value = null
|
||||
diffReady.value = false
|
||||
try {
|
||||
versions.value = await getCodeVersions(active.value.name)
|
||||
} catch {
|
||||
@@ -157,8 +159,12 @@ async function openVersions(): Promise<void> {
|
||||
|
||||
async function showDiff(h8: string): Promise<void> {
|
||||
if (!active.value) return
|
||||
diffReady.value = false
|
||||
try {
|
||||
diffCode.value = await getCodeVersion(active.value.name, h8)
|
||||
// 抽屉展开动画(~300ms)期间容器宽为 0,Monaco diff 在其中创建会把左右分栏算死
|
||||
// (左栏被压扁且事后 layout() 救不回)。等动画结束容器全宽后再挂载组件。
|
||||
setTimeout(() => { diffReady.value = true }, 360)
|
||||
} catch {
|
||||
ElMessage.error('读取版本失败')
|
||||
}
|
||||
@@ -245,8 +251,8 @@ async function showDiff(h8: string): Promise<void> {
|
||||
<span class="muted mono" style="font-size:11px">{{ (v.size / 1024).toFixed(1) }} KB</span>
|
||||
<button class="term-btn sm" style="margin-left:auto" @click="showDiff(v.code_version)">对比当前</button>
|
||||
</div>
|
||||
<div v-if="diffCode != null" class="ver-diff">
|
||||
<div class="muted mono" style="font-size:11px;margin-bottom:6px">左=快照版本 · 右=当前代码</div>
|
||||
<div v-if="diffCode != null && diffReady" class="ver-diff">
|
||||
<div class="muted mono" style="font-size:11px;margin-bottom:6px">左右滚动联动 · 快照 vs 当前</div>
|
||||
<MonacoDiff :original="diffCode" :modified="code" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user