fix(ui): plug rule diff editor leaks

Author: mochengqian

ui-vue3/src/views/traffic/_shared/RuleDiffEditor.vue

@@ -16,11 +16,11 @@
 -->
 
 <template>
-  <div :id="editorId" class="rule-diff-editor" :style="{ height: editorHeight }"></div>
+  <div ref="editorEl" class="rule-diff-editor" :style="{ height: editorHeight }"></div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import * as monaco from 'monaco-editor'
 
 const props = defineProps({
@@ -32,36 +32,39 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  editorId: {
-    type: String,
-    default: 'rule-diff-editor'
-  },
   height: {
     type: [String, Number],
     default: '420px'
   }
 })
 
 let diffEditor: monaco.editor.IStandaloneDiffEditor | null = null
+const editorEl = ref<HTMLElement | null>(null)
 const editorHeight = computed(() =>
   typeof props.height === 'number' ? `${props.height}px` : props.height
 )
 
+const disposeModels = () => {
+  const model = diffEditor?.getModel()
+  model?.original.dispose()
+  model?.modified.dispose()
+}
+
 const render = () => {
   if (!diffEditor) {
     return
   }
+  disposeModels()
   const originalModel = monaco.editor.createModel(props.original || '', 'json')
   const modifiedModel = monaco.editor.createModel(props.modified || '', 'json')
   diffEditor.setModel({ original: originalModel, modified: modifiedModel })
 }
 
 onMounted(() => {
-  const el = document.getElementById(props.editorId)
-  if (!el) {
+  if (!editorEl.value) {
     return
   }
-  diffEditor = monaco.editor.createDiffEditor(el, {
+  diffEditor = monaco.editor.createDiffEditor(editorEl.value, {
     automaticLayout: true,
     renderSideBySide: true,
     readOnly: true,
@@ -76,6 +79,7 @@ watch(
 )
 
 onBeforeUnmount(() => {
+  disposeModels()
   diffEditor?.dispose()
   diffEditor = null
 })

ui-vue3/src/views/traffic/_shared/RuleHistoryDrawer.vue

@@ -89,10 +89,6 @@ defineEmits(['update:open', 'view-json', 'diff-current', 'rollback'])
 
 .history-item {
   padding: 4px 0 12px;
-
-  &.current {
-    color: inherit;
-  }
 }
 
 .history-head,

ui-vue3/src/views/traffic/_shared/ruleVersion.ts

@@ -25,10 +25,6 @@ import {
 } from '@/api/service/traffic'
 import { HTTP_STATUS } from '@/base/http/constants'
 
-export const currentVersionIdFromItems = (items: RuleVersion[]): number | undefined => {
-  return items.find((item) => item.isCurrent)?.id || items[0]?.id
-}
-
 export interface CurrentVersionState {
   id?: number
   versionNo?: number
@@ -42,13 +38,6 @@ export const currentVersionStateFromItems = (items: RuleVersion[]): CurrentVersi
   }
 }
 
-export const fetchCurrentVersionId = async (
-  kind: TrafficRuleKind,
-  ruleName: string
-): Promise<number | undefined> => {
-  return (await fetchCurrentVersionState(kind, ruleName)).id
-}
-
 export const fetchCurrentVersionState = async (
   kind: TrafficRuleKind,
   ruleName: string