From b962cc2f07d3912171a39051ec9f0d4c004d4a4d Mon Sep 17 00:00:00 2001
From: CI010 <cijhn@hotmail.com>
Date: Sun, 24 Nov 2024 19:57:09 +0800
Subject: [PATCH] refactor: Reduce memroy footprint by using virtual list for
 modpack upstream display

---
 .../StoreProjectInstallVersionDialog.vue      |  71 +++----
 .../src/directives/sharedTooltip.ts           |   2 +-
 xmcl-keystone-ui/src/util/el.ts               |   5 +
 .../src/views/AppSideBarContentFocus.vue      |  33 +++
 xmcl-keystone-ui/src/views/HomeDefault.vue    |   5 +-
 xmcl-keystone-ui/src/views/HomeFocus.vue      |  78 +++----
 .../src/views/HomeFocusFooter.vue             | 103 +++++-----
 xmcl-keystone-ui/src/views/HomeLayout.vue     |   2 +
 .../src/views/HomeUpstreamBase.vue            | 194 +++++++++++++++---
 .../src/views/HomeUpstreamCurseforge.vue      |   2 +-
 .../src/views/HomeUpstreamFeedTheBeast.vue    |   2 +-
 .../src/views/HomeUpstreamModrinth.vue        |   4 +-
 .../src/views/HomeUpstreamVersion.vue         |   1 -
 13 files changed, 315 insertions(+), 187 deletions(-)
 create mode 100644 xmcl-keystone-ui/src/util/el.ts

diff --git a/xmcl-keystone-ui/src/components/StoreProjectInstallVersionDialog.vue b/xmcl-keystone-ui/src/components/StoreProjectInstallVersionDialog.vue
index 229d54df3..97264b2a6 100644
--- a/xmcl-keystone-ui/src/components/StoreProjectInstallVersionDialog.vue
+++ b/xmcl-keystone-ui/src/components/StoreProjectInstallVersionDialog.vue
@@ -163,9 +163,9 @@
 
 <script lang="ts" setup>
 import { useMarkdown } from '@/composables/markdown'
-import { useVuetifyColor } from '@/composables/vuetify'
 import { useVirtualizer, VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual'
 import { VueInstance } from '@vueuse/core'
+import { getEl } from '@/util/el'
 import StoreProjectInstallVersionDialogVersion from './StoreProjectInstallVersionDialogVersion.vue'
 
 export interface StoreProjectVersion {
@@ -197,7 +197,6 @@ const props = defineProps<{
 const { t } = useI18n()
 
 const emit = defineEmits(['install', 'input'])
-const { getColorCode } = useVuetifyColor()
 
 const gameVersions = computed(() => {
   const result = [] as string[]
@@ -231,12 +230,6 @@ const gameVersion = ref('' as string)
 const loader = ref('' as string)
 const versionType = ref('' as string)
 
-function getKey(i: number) {
-  const v = all.value[i]
-  if (!v) return i
-  return typeof v === 'string' ? v : v.id
-}
-
 const all = computed(() => {
   const filtered = [] as StoreProjectVersion[]
   for (const v of props.versions) {
@@ -280,8 +273,32 @@ const all = computed(() => {
   return [...result, 'divider', ...originals.filter(v => !result.includes(v))]
 })
 
-const offsetTop = ref(0)
+// Select versions
+const loading = ref(false)
+const selectedDetail = ref<StoreProjectVersionDetail | undefined>(undefined)
+async function onVersionClicked(version: StoreProjectVersion) {
+  try {
+    loading.value = true
+    const detail = await props.getVersionDetail(version)
+    selectedDetail.value = detail
+  } finally {
+    loading.value = false
+  }
+}
+
+function asAny(v: unknown): any {
+  return v as any
+}
 
+watch(() => props.value, (newVal) => {
+  if (!newVal) {
+    selectedDetail.value = undefined
+  }
+})
+const { render } = useMarkdown()
+
+// virtual scroll
+const offsetTop = ref(0)
 const containerRef = ref<HTMLElement | VueInstance | null>(null)
 const scrollElement = ref<VueInstance | HTMLElement | null>(null)
 
@@ -291,7 +308,11 @@ watch(containerRef, container => {
   }
 })
 
-const selectedDetail = ref<StoreProjectVersionDetail | undefined>(undefined)
+function getKey(i: number) {
+  const v = all.value[i]
+  if (!v) return i
+  return typeof v === 'string' ? v : v.id
+}
 
 const virtualizerOptions = computed(() => ({
   count: selectedDetail.value ? selectedDetail.value.dependencies.length : all.value.length,
@@ -313,44 +334,14 @@ const measureElement = (el: any) => {
   virtualizer.value.measureElement(el)
 }
 
-const loading = ref(false)
-
-async function onVersionClicked(version: StoreProjectVersion) {
-  try {
-    loading.value = true
-    const detail = await props.getVersionDetail(version)
-    selectedDetail.value = detail
-  } finally {
-    loading.value = false
-  }
-}
-
-function getEl(e: any) {
-  if (!e) return undefined
-  if ('$el' in e) return e.$el as HTMLElement
-  return e as HTMLElement
-}
-
-function asAny(v: unknown): any {
-  return v as any
-}
-
 watch(selectedDetail, () => {
   nextTick().then(() => {
     const el = getEl(containerRef.value)
     if (el) {
       virtualizer.value.scrollToIndex(0)
-      const top = el.offsetTop || 0
       offsetTop.value = 0
     }
   })
 })
 
-watch(() => props.value, (newVal) => {
-  if (!newVal) {
-    selectedDetail.value = undefined
-  }
-})
-const { render } = useMarkdown()
-
 </script>
diff --git a/xmcl-keystone-ui/src/directives/sharedTooltip.ts b/xmcl-keystone-ui/src/directives/sharedTooltip.ts
index 4421e29a2..b78f0293c 100644
--- a/xmcl-keystone-ui/src/directives/sharedTooltip.ts
+++ b/xmcl-keystone-ui/src/directives/sharedTooltip.ts
@@ -2,7 +2,7 @@ import { SharedTooltipData, useSharedTooltipData } from '@/composables/sharedToo
 import { FunctionDirective } from 'vue'
 
 export type VSharedTooltipParam = {
-  text: string
+  text?: string
   items?: Array<{ icon: string; text: string }>
   color?: string
   list?: Array<string>
diff --git a/xmcl-keystone-ui/src/util/el.ts b/xmcl-keystone-ui/src/util/el.ts
new file mode 100644
index 000000000..752aeb7ce
--- /dev/null
+++ b/xmcl-keystone-ui/src/util/el.ts
@@ -0,0 +1,5 @@
+export function getEl(e: any) {
+  if (!e) return undefined
+  if ('$el' in e) return e.$el as HTMLElement
+  return e as HTMLElement
+}
diff --git a/xmcl-keystone-ui/src/views/AppSideBarContentFocus.vue b/xmcl-keystone-ui/src/views/AppSideBarContentFocus.vue
index ffa91d535..469675bea 100644
--- a/xmcl-keystone-ui/src/views/AppSideBarContentFocus.vue
+++ b/xmcl-keystone-ui/src/views/AppSideBarContentFocus.vue
@@ -20,6 +20,23 @@
 
         <v-list-item-title v-text="'Text'" />
       </v-list-item>
+
+      <v-list-item
+        v-if="upstreamBtn"
+        v-shared-tooltip.right="_ => (upstreamBtn || [])[1]"
+        link
+        push
+        to="/?upstream=true"
+        class="non-moveable"
+      >
+        <v-list-item-icon>
+          <v-icon>
+            {{ upstreamBtn[0] }}
+          </v-icon>
+        </v-list-item-icon>
+        <v-list-item-title v-text="'Text'" />
+      </v-list-item>
+
       <v-list-item
         v-shared-tooltip.right="_ => t('mod.name', 2)"
         link
@@ -78,8 +95,10 @@
 </template>
 <script lang="ts" setup>
 import { useDialog } from '@/composables/dialog'
+import { kInstance } from '@/composables/instance'
 import { AddInstanceDialogKey } from '@/composables/instanceTemplates'
 import { vSharedTooltip } from '@/directives/sharedTooltip'
+import { injection } from '@/util/inject'
 
 const router = useRouter()
 const expanding = ref(false)
@@ -101,5 +120,19 @@ router.afterEach((to) => {
 })
 const { show: showAddInstance } = useDialog(AddInstanceDialogKey)
 
+const { instance } = injection(kInstance)
+const upstreamBtn = computed(() => {
+  const up = instance.value.upstream
+  if (!up) return undefined
+  if (up.type === 'curseforge-modpack') {
+    return ['$vuetify.icons.curseforge', 'Curseforge']
+  } else if (up.type === 'modrinth-modpack') {
+    return ['$vuetify.icons.modrinth', 'Modrinth']
+  } else if (up.type === 'ftb-modpack') {
+    return ['$vuetify.icons.ftb', 'FTB']
+  }
+  return undefined
+})
+
 const { t } = useI18n()
 </script>
diff --git a/xmcl-keystone-ui/src/views/HomeDefault.vue b/xmcl-keystone-ui/src/views/HomeDefault.vue
index d2e1e645f..4c4002df8 100644
--- a/xmcl-keystone-ui/src/views/HomeDefault.vue
+++ b/xmcl-keystone-ui/src/views/HomeDefault.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="scrollElement"
     class="relative mx-3 select-none"
   >
     <HomeDatabaseError />
@@ -273,6 +274,9 @@ const saveRowCount = computed(() => getRowCount(containerWidths[CardType.Save]))
 //   newsLayout.value = layout
 // })
 
+const scrollElement = ref(null as HTMLElement | null)
+provide('scrollElement', scrollElement)
+
 const { t } = useI18n()
 useTutorial(computed(() => {
   const steps: DriveStep[] = [
@@ -283,7 +287,6 @@ useTutorial(computed(() => {
   ]
   return steps
 }))
-
 </script>
 
 <style scoped>
diff --git a/xmcl-keystone-ui/src/views/HomeFocus.vue b/xmcl-keystone-ui/src/views/HomeFocus.vue
index d151e78aa..aa10d358b 100644
--- a/xmcl-keystone-ui/src/views/HomeFocus.vue
+++ b/xmcl-keystone-ui/src/views/HomeFocus.vue
@@ -1,19 +1,19 @@
 <template>
   <div
-    ref="content"
-    class="h-full overflow-auto"
-    @wheel="onWheel"
+    class="relative h-full"
   >
-    <Transition name="slide-y-transition">
-      <div
-        v-if="!inView"
-        key="empty"
-        class="h-full"
-      >
-        <HomeDatabaseError />
-      </div>
+    <div
+      v-if="!upstreamQuery"
+      class="h-full"
+    >
+      <HomeDatabaseError />
+      <HomeFocusFooter
+        class="absolute bottom-0 left-0 pb-[26px]"
+      />
+    </div>
+    <template v-else>
       <HomeUpstreamCurseforge
-        v-else-if="instance.upstream && instance.upstream.type === 'curseforge-modpack'"
+        v-if="instance.upstream && instance.upstream.type === 'curseforge-modpack'"
         :id="instance.upstream.modId"
         key="curseforge"
         class="p-2"
@@ -24,11 +24,13 @@
         key="modrinth"
         class="p-2"
       />
-    </Transition>
-
-    <HomeFocusFooter
-      class="absolute bottom-0 left-0 flex gap-6 px-8 pb-[26px]"
-    />
+      <HomeUpstreamFeedTheBeast
+        v-else-if="instance.upstream && instance.upstream.type === 'ftb-modpack'"
+        :id="instance.upstream.id"
+        key="ftb"
+        class="p-2"
+      />
+    </template>
   </div>
 </template>
 <script setup lang="ts">
@@ -36,11 +38,13 @@ import { kInstance } from '@/composables/instance'
 import { useTutorial } from '@/composables/tutorial'
 import { injection } from '@/util/inject'
 import { DriveStep } from 'driver.js'
-import debounce from 'lodash.debounce'
 import HomeFocusFooter from './HomeFocusFooter.vue'
 import HomeUpstreamCurseforge from './HomeUpstreamCurseforge.vue'
 import HomeUpstreamModrinth from './HomeUpstreamModrinth.vue'
 import HomeDatabaseError from './HomeDatabaseError.vue'
+import HomeUpstreamFeedTheBeast from './HomeUpstreamFeedTheBeast.vue'
+import { useScroll } from '@vueuse/core'
+import { useQuery } from '@/composables/query'
 
 const { instance } = injection(kInstance)
 const { t } = useI18n()
@@ -55,41 +59,5 @@ useTutorial(computed(() => {
   return steps
 }))
 
-const content = ref<HTMLElement | null>(null)
-let counter = 0
-const inView = ref(false)
-const scrollIn = debounce(() => {
-  if (counter > 3 && instance.value.upstream) {
-    inView.value = true
-  }
-  counter = 0
-}, 300)
-
-const scrollOut = debounce(() => {
-  if (counter > 3 && instance.value.upstream) {
-    inView.value = false
-  }
-  counter = 0
-}, 300)
-
-function onWheel(e: WheelEvent) {
-  const v = content.value
-  if (!v) return
-  if (e.deltaY > 0) {
-    if (!inView.value) {
-      counter++
-      scrollIn()
-    }
-  }
-  if (e.deltaY < 0) {
-    if (inView.value) {
-      const el = content.value
-      if (!el) return
-      if (el.scrollTop === 0) {
-        counter++
-        scrollOut()
-      }
-    }
-  }
-}
+const upstreamQuery = useQuery('upstream')
 </script>
diff --git a/xmcl-keystone-ui/src/views/HomeFocusFooter.vue b/xmcl-keystone-ui/src/views/HomeFocusFooter.vue
index 47a241f50..027b364f1 100644
--- a/xmcl-keystone-ui/src/views/HomeFocusFooter.vue
+++ b/xmcl-keystone-ui/src/views/HomeFocusFooter.vue
@@ -1,56 +1,57 @@
 <template>
-  <div class="flex w-full items-end">
-    <v-btn
-      v-shared-tooltip="_ => t('baseSetting.title')"
-      text
-      icon
-      to="/base-setting"
-      :loading="refreshing"
-    >
-      <v-icon>
-        tune
-      </v-icon>
-    </v-btn>
-    <v-btn
-      v-shared-tooltip="_ => t('instance.showInstance')"
-      text
-      icon
-      @click="showInstanceFolder"
-    >
-      <v-icon>
-        folder
-      </v-icon>
-    </v-btn>
+  <div class="w-full">
+    <div class="relative mx-6 flex-grow flex gap-6 items-end">
+      <v-btn
+        v-shared-tooltip="_ => t('baseSetting.title')"
+        text
+        icon
+        to="/base-setting"
+        :loading="refreshing"
+      >
+        <v-icon>
+          tune
+        </v-icon>
+      </v-btn>
+      <v-btn
+        v-shared-tooltip="_ => t('instance.showInstance')"
+        text
+        icon
+        @click="showInstanceFolder"
+      >
+        <v-icon>
+          folder
+        </v-icon>
+      </v-btn>
 
-    <v-btn
-      v-shared-tooltip="_ => t('logsCrashes.title')"
-      text
-      icon
-      @click="showLogDialog"
-    >
-      <v-icon>
-        subtitles
-      </v-icon>
-    </v-btn>
-    <v-btn
-      v-shared-tooltip="_ => t('modpack.export')"
-      text
-      icon
-      :loading="refreshing"
-      @click="showExport"
-    >
-      <v-icon>
-        share
-      </v-icon>
-    </v-btn>
-
-    <v-spacer />
-    <HomeLaunchButton
-      class="ml-4"
-      :status="status"
-      @pause="pause"
-      @resume="resume"
-    />
+      <v-btn
+        v-shared-tooltip="_ => t('logsCrashes.title')"
+        text
+        icon
+        @click="showLogDialog"
+      >
+        <v-icon>
+          subtitles
+        </v-icon>
+      </v-btn>
+      <v-btn
+        v-shared-tooltip="_ => t('modpack.export')"
+        text
+        icon
+        :loading="refreshing"
+        @click="showExport"
+      >
+        <v-icon>
+          share
+        </v-icon>
+      </v-btn>
+      <v-spacer />
+      <HomeLaunchButton
+        class="ml-4"
+        :status="status"
+        @pause="pause"
+        @resume="resume"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/xmcl-keystone-ui/src/views/HomeLayout.vue b/xmcl-keystone-ui/src/views/HomeLayout.vue
index 6ca5dec46..fcd1b9d0a 100644
--- a/xmcl-keystone-ui/src/views/HomeLayout.vue
+++ b/xmcl-keystone-ui/src/views/HomeLayout.vue
@@ -78,6 +78,8 @@ const { start, end } = useBlockSharedTooltip()
 const { arrivedState } = useScroll(containerRef)
 provide('scroll', arrivedState)
 
+// Scroll
+provide('scrollElement', containerRef)
 </script>
 
 <style>
diff --git a/xmcl-keystone-ui/src/views/HomeUpstreamBase.vue b/xmcl-keystone-ui/src/views/HomeUpstreamBase.vue
index 7270dce51..6962a3125 100644
--- a/xmcl-keystone-ui/src/views/HomeUpstreamBase.vue
+++ b/xmcl-keystone-ui/src/views/HomeUpstreamBase.vue
@@ -1,48 +1,83 @@
 <template>
-  <div class="mx-2 grid grid-cols-9  gap-6 pb-4">
+  <div class="mx-2 grid grid-cols-9 gap-6 pb-4">
     <div
+      ref="containerRef"
       class="col-span-9 lg:col-span-6"
+      :style="{
+        height: `${virtualizer.getTotalSize()}px`,
+        position: 'relative',
+        width: '100%',
+        marginTop: `${-offsetTop}px`,
+      }"
     >
-      <v-subheader class="flex">
-        {{ t('modrinthCard.currentVersion') }}
-        <div class="flex-grow" />
-        <v-switch
-          v-model="_only"
-          dense
-          :label="t('upstream.onlyShowCurrentVersion')"
-        />
-      </v-subheader>
-      <HomeUpstreamVersion
-        v-if="currentVersion"
-        :version="currentVersion"
-        outlined
-        no-action
-        @changelog="$emit('changelog', currentVersion)"
-        @update="$emit('update', currentVersion)"
-        @duplicate="$emit('duplicate', currentVersion)"
-      />
-      <div
-        v-for="[date, versions] of Object.entries(items)"
-        :key="date"
+      <template
+        v-for="row of virtualizer.getVirtualItems()"
       >
-        <v-subheader class="text-md">
-          {{ date }}
+        <v-subheader
+          v-if="row.index === 0"
+          :key="'currentVersion' + row.index"
+          :ref="measureElement"
+          class="flex"
+          :data-index="row.index"
+          :style="{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            transform: `translateY(${row.start}px)`
+          }"
+        >
+          {{ t('modrinthCard.currentVersion') }}
+          <div class="flex-grow" />
+          <v-switch
+            v-model="_only"
+            dense
+            :label="t('upstream.onlyShowCurrentVersion')"
+          />
+        </v-subheader>
+        <v-subheader
+          v-else-if="isHeader(row.index)"
+          :ref="measureElement"
+          :key="getHeader(row.index)"
+          class="text-md"
+          :data-index="row.index"
+          :style="{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            transform: `translateY(${row.start}px)`
+          }"
+        >
+          {{ getHeader(row.index) }}
         </v-subheader>
-        <div class="flex flex-col gap-2">
+        <div
+          v-else
+          :ref="measureElement"
+          :key="getItemKey(row.index)"
+          :data-index="row.index"
+          :style="{
+            position: 'absolute',
+            top: 0,
+            paddingTop: getItemPaddingTop(row.index),
+            left: 0,
+            width: '100%',
+            transform: `translateY(${row.start}px)`
+          }"
+        >
           <HomeUpstreamVersion
-            v-for="v of versions"
-            :key="v.id"
-            :version="v"
+            :version="getItemVersion(row.index)"
             :updating="updating"
             :duplicating="duplicating"
-            :no-action="currentVersion?.id === v.id"
-            :downgrade="currentVersion ? isDowngrade(currentVersion.datePublished, v.datePublished) : false"
-            @changelog="$emit('changelog', v)"
-            @update="$emit('update', v)"
-            @duplicate="$emit('duplicate', v)"
+            :outlined="row.index === 1"
+            :no-action="row.index === 1 || currentVersion?.id === getItemVersion(row.index).id"
+            :downgrade="isItemDowngrade(row.index)"
+            @changelog="$emit('changelog', getItemVersion(row.index))"
+            @update="$emit('update', getItemVersion(row.index))"
+            @duplicate="$emit('duplicate', getItemVersion(row.index))"
           />
         </div>
-      </div>
+      </template>
     </div>
 
     <div
@@ -62,6 +97,8 @@
 import { useVModel } from '@vueuse/core'
 import HomeUpstreamHeader, { UpstreamHeaderProps } from './HomeUpstreamHeader.vue'
 import HomeUpstreamVersion, { ProjectVersionProps } from './HomeUpstreamVersion.vue'
+import { useVirtualizer, VirtualizerOptions } from '@tanstack/vue-virtual'
+import { getEl } from '@/util/el'
 
 const props = defineProps<{
   duplicating?: boolean
@@ -82,4 +119,93 @@ const isDowngrade = (current: string, target: string) => {
   return da > db
 }
 
+// virtual scroll
+const listItems = computed(() => {
+  if (!props.currentVersion) {
+    return []
+  }
+  const items = props.items
+  const results = [
+    '',
+    props.currentVersion,
+  ] as (ProjectVersionProps | string)[]
+  for (const [date, versions] of Object.entries(items)) {
+    results.push(date)
+    results.push(...versions)
+  }
+  return results
+})
+const scrollElement = inject('scrollElement', ref(null as HTMLElement | null))
+const offsetTop = ref(0)
+const containerRef = ref(null as HTMLElement | null)
+const virtualizerOptions = computed(() => ({
+  count: Object.keys(props.items).length,
+  getScrollElement: () => getEl(scrollElement.value) as any,
+  paddingStart: offsetTop.value,
+  overscan: 5,
+  estimateSize,
+} satisfies Partial<VirtualizerOptions<HTMLElement, HTMLElement>>))
+
+watch(containerRef, container => {
+  if (container) {
+    nextTick().then(() => { offsetTop.value = container.offsetTop })
+  }
+})
+const virtualizer = useVirtualizer(virtualizerOptions)
+
+function estimateSize(i: number) {
+  if (typeof listItems.value[i] === 'string') {
+    return 48
+  }
+  const item = listItems.value[i] as ProjectVersionProps
+  const changelogHtml = item.changelog
+  // estimate the height of the changelog by counting how many div and li inside
+  const divCount = (changelogHtml.match(/<div/g) || []).length
+  const liCount = (changelogHtml.match(/<li/g) || []).length
+  return Math.min(650, 48 + divCount * 24 + liCount * 24)
+}
+function isHeader(index: number) {
+  return typeof listItems.value[index] === 'string'
+}
+function getHeader(index: number) {
+  return listItems.value[index] as string
+}
+function getItemKey(index: number) {
+  const item = listItems.value[index]
+  if (typeof item === 'string') {
+    return item + _only.value
+  }
+  return item.id + _only.value
+}
+function getItemPaddingTop(index: number) {
+  if (typeof listItems.value[index - 1] !== 'string') {
+    return '0.5rem'
+  }
+  return ''
+}
+function getItemVersion(index: number) {
+  const item = listItems.value[index]
+  if (typeof item === 'string') {
+    throw new Error()
+  }
+  return item
+}
+function isItemDowngrade(index: number) {
+  const item = listItems.value[index]
+  if (typeof item === 'string') {
+    return false
+  }
+  return isDowngrade(props.currentVersion?.datePublished ?? '', item.datePublished)
+}
+const measureElement = (el: any) => {
+  if (!el) return
+  if ('$el' in el) {
+    el = el.$el
+  }
+  virtualizer.value.measureElement(el)
+}
+watch(_only, () => {
+  virtualizer.value.scrollToIndex(0)
+  offsetTop.value = 0
+})
 </script>
diff --git a/xmcl-keystone-ui/src/views/HomeUpstreamCurseforge.vue b/xmcl-keystone-ui/src/views/HomeUpstreamCurseforge.vue
index 65f47886b..336454749 100644
--- a/xmcl-keystone-ui/src/views/HomeUpstreamCurseforge.vue
+++ b/xmcl-keystone-ui/src/views/HomeUpstreamCurseforge.vue
@@ -99,7 +99,7 @@ const items = computed(() => {
     if (!result[date]) {
       result[date] = []
     }
-    result[date].push(reactive({
+    result[date].push(markRaw({
       id: d.id.toString(),
       name: d.displayName,
       versionType: d?.releaseType === 1 ? 'release' : d?.releaseType === 2 ? 'beta' : 'alpha',
diff --git a/xmcl-keystone-ui/src/views/HomeUpstreamFeedTheBeast.vue b/xmcl-keystone-ui/src/views/HomeUpstreamFeedTheBeast.vue
index 1eaa00807..6a2043412 100644
--- a/xmcl-keystone-ui/src/views/HomeUpstreamFeedTheBeast.vue
+++ b/xmcl-keystone-ui/src/views/HomeUpstreamFeedTheBeast.vue
@@ -106,7 +106,7 @@ const items = computed(() => {
     if (!result[date]) {
       result[date] = []
     }
-    result[date].push(shallowReactive({
+    result[date].push(markRaw({
       id: d.id.toString(),
       name: d.name,
       versionType: 'release',
diff --git a/xmcl-keystone-ui/src/views/HomeUpstreamModrinth.vue b/xmcl-keystone-ui/src/views/HomeUpstreamModrinth.vue
index 30e21a25d..d351b7d3c 100644
--- a/xmcl-keystone-ui/src/views/HomeUpstreamModrinth.vue
+++ b/xmcl-keystone-ui/src/views/HomeUpstreamModrinth.vue
@@ -101,7 +101,7 @@ const items = computed(() => {
     if (!result[date]) {
       result[date] = []
     }
-    result[date].push({
+    result[date].push(markRaw({
       id: d.id,
       name: d.name,
       versionType: d.version_type as any,
@@ -111,7 +111,7 @@ const items = computed(() => {
       datePublished: (d.date_published),
       downloads: d.downloads,
       changelog: d.changelog ? render(d.changelog) : '',
-    })
+    }))
   }
 
   return result
diff --git a/xmcl-keystone-ui/src/views/HomeUpstreamVersion.vue b/xmcl-keystone-ui/src/views/HomeUpstreamVersion.vue
index 1c808b94f..43a60e912 100644
--- a/xmcl-keystone-ui/src/views/HomeUpstreamVersion.vue
+++ b/xmcl-keystone-ui/src/views/HomeUpstreamVersion.vue
@@ -136,7 +136,6 @@ const emit = defineEmits(['update', 'duplicate', 'changelog'])
 const version = computed(() => props.version)
 const { getColorCode } = useVuetifyColor()
 const { t } = useI18n()
-const { render } = useMarkdown()
 const getLoader = (loader: string) => {
   loader = loader.toLowerCase()
   if (loader === 'forge') return '$vuetify.icons.forge'