perf: reduce frontend memory pressure and startup cost

Limit long-lived page and component retention while virtualizing large card views to keep runtime memory lower. Defer heavy editor, chart, workflow, calendar, and icon code so the app loads less JavaScript up front.

src/utils/apexCharts.ts

@@ -0,0 +1,40 @@
+declare global {
+  interface Window {
+    Apex: any
+  }
+}
+
+export function configureApexChartsTheme(themeName: string) {
+  if (typeof window === 'undefined' || !window.Apex) {
+    return
+  }
+
+  try {
+    const isDark = themeName === 'dark' || themeName === 'transparent'
+
+    window.Apex.dataLabels = {
+      formatter: function (_: number, { seriesIndex, w }: { seriesIndex: number; w: any }) {
+        const data = w.config.series[seriesIndex]
+        return data.toFixed(data % 1 === 0 ? 0 : 1)
+      },
+    }
+
+    window.Apex.legend = {
+      labels: {
+        useSeriesColors: true,
+      },
+    }
+
+    window.Apex.title = {
+      style: {
+        color: 'rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))',
+      },
+    }
+
+    window.Apex.tooltip = {
+      theme: isDark ? 'dark' : 'light',
+    }
+  } catch (error) {
+    console.warn('ApexCharts 全局配置失败:', error)
+  }
+}

src/utils/mediaStatusCache.ts

@@ -0,0 +1,77 @@
+type StatusCacheEntry = {
+  expiresAt: number
+  value: boolean
+}
+
+const STATUS_CACHE_TTL = 3 * 60 * 1000
+
+const existsStatusCache = new Map<string, StatusCacheEntry>()
+const existsStatusRequests = new Map<string, Promise<boolean>>()
+const subscribeStatusCache = new Map<string, StatusCacheEntry>()
+const subscribeStatusRequests = new Map<string, Promise<boolean>>()
+
+function getCachedValue(cache: Map<string, StatusCacheEntry>, key: string): boolean | undefined {
+  const entry = cache.get(key)
+  if (!entry) {
+    return undefined
+  }
+
+  if (entry.expiresAt <= Date.now()) {
+    cache.delete(key)
+    return undefined
+  }
+
+  return entry.value
+}
+
+function setCachedValue(cache: Map<string, StatusCacheEntry>, key: string, value: boolean) {
+  cache.set(key, {
+    expiresAt: Date.now() + STATUS_CACHE_TTL,
+    value,
+  })
+}
+
+async function resolveCachedStatus(
+  cache: Map<string, StatusCacheEntry>,
+  requests: Map<string, Promise<boolean>>,
+  key: string,
+  loader: () => Promise<boolean>,
+): Promise<boolean> {
+  const cachedValue = getCachedValue(cache, key)
+  if (cachedValue !== undefined) {
+    return cachedValue
+  }
+
+  const currentRequest = requests.get(key)
+  if (currentRequest) {
+    return currentRequest
+  }
+
+  const request = loader()
+    .then(value => {
+      setCachedValue(cache, key, value)
+      return value
+    })
+    .finally(() => {
+      requests.delete(key)
+    })
+
+  requests.set(key, request)
+  return request
+}
+
+export function getCachedMediaExistsStatus(key: string, loader: () => Promise<boolean>) {
+  return resolveCachedStatus(existsStatusCache, existsStatusRequests, key, loader)
+}
+
+export function setCachedMediaExistsStatus(key: string, value: boolean) {
+  setCachedValue(existsStatusCache, key, value)
+}
+
+export function getCachedMediaSubscribeStatus(key: string, loader: () => Promise<boolean>) {
+  return resolveCachedStatus(subscribeStatusCache, subscribeStatusRequests, key, loader)
+}
+
+export function setCachedMediaSubscribeStatus(key: string, value: boolean) {
+  setCachedValue(subscribeStatusCache, key, value)
+}

src/utils/sseManager.ts

@@ -16,6 +16,16 @@ export class SSEManager {
   }
   private reconnectAttempts = 0
   private isConnecting = false
+  private readonly handleVisibilityChange = () => {
+    if (document.hidden) {
+      this.handleBackground()
+    } else {
+      this.handleForeground()
+    }
+  }
+  private readonly handleBeforeUnload = () => {
+    this.destroy()
+  }
 
   constructor(url: string, options: Partial<typeof SSEManager.prototype.options> = {}) {
     this.url = url
@@ -30,18 +40,13 @@ export class SSEManager {
   }
 
   private setupVisibilityListener() {
-    document.addEventListener('visibilitychange', () => {
-      if (document.hidden) {
-        this.handleBackground()
-      } else {
-        this.handleForeground()
-      }
-    })
+    document.addEventListener('visibilitychange', this.handleVisibilityChange)
+    window.addEventListener('beforeunload', this.handleBeforeUnload)
+  }
 
-    // 页面卸载时关闭连接
-    window.addEventListener('beforeunload', () => {
-      this.close()
-    })
+  private removeVisibilityListener() {
+    document.removeEventListener('visibilitychange', this.handleVisibilityChange)
+    window.removeEventListener('beforeunload', this.handleBeforeUnload)
   }
 
   private handleBackground() {
@@ -172,6 +177,18 @@ export class SSEManager {
    * 关闭连接
    */
   close() {
+    this.resetConnectionState()
+  }
+
+  /**
+   * 销毁管理器并清理所有引用
+   */
+  destroy() {
+    this.resetConnectionState(true)
+    this.removeVisibilityListener()
+  }
+
+  private resetConnectionState(clearListeners = false) {
     if (this.eventSource) {
       this.eventSource.close()
       this.eventSource = null
@@ -187,7 +204,10 @@ export class SSEManager {
       this.backgroundCloseTimer = null
     }
 
-    this.listeners.clear()
+    if (clearListeners) {
+      this.listeners.clear()
+    }
+
     this.isConnecting = false
     this.reconnectAttempts = 0
   }
@@ -210,8 +230,9 @@ export class SSEManager {
    * 强制重新连接
    */
   forceReconnect() {
+    const hasActiveListeners = this.listeners.size > 0
     this.close()
-    if (!this.isBackground && this.listeners.size > 0) {
+    if (!this.isBackground && hasActiveListeners) {
       this.reconnectSSE()
     }
   }
@@ -244,6 +265,10 @@ export class SSEManager {
 class SSEManagerSingleton {
   private managers: Map<string, SSEManager> = new Map()
 
+  private getIndependentManagerKey(url: string, listenerId: string): string {
+    return `${url}::${listenerId}`
+  }
+
   /**
    * 获取或创建SSE管理器
    * @param url SSE连接URL
@@ -285,16 +310,28 @@ class SSEManagerSingleton {
   closeManager(url: string) {
     const manager = this.managers.get(url)
     if (manager) {
-      manager.close()
+      manager.destroy()
       this.managers.delete(url)
     }
   }
 
+  /**
+   * 关闭独立管理器
+   */
+  closeIndependentManager(url: string, listenerId: string) {
+    const managerKey = this.getIndependentManagerKey(url, listenerId)
+    const manager = this.managers.get(managerKey)
+    if (manager) {
+      manager.destroy()
+      this.managers.delete(managerKey)
+    }
+  }
+
   /**
    * 关闭所有管理器
    */
   closeAllManagers() {
-    this.managers.forEach(manager => manager.close())
+    this.managers.forEach(manager => manager.destroy())
     this.managers.clear()
   }
 }

src/utils/themeManager.ts

@@ -9,6 +9,7 @@ class ThemeManager {
   private themes: Map<string, ThemeConfig> = new Map()
   private currentTheme: string = 'default'
   private loadedLinks: Map<string, HTMLLinkElement> = new Map()
+  private themeListeners: Map<(theme: string) => void, EventListener> = new Map()
 
   constructor() {
     // 注册所有可用主题
@@ -190,18 +191,29 @@ class ThemeManager {
    * 监听主题变更事件
    */
   onThemeChange(callback: (theme: string) => void): void {
-    document.addEventListener('themechange', (event: any) => {
-      callback(event.detail.theme)
-    })
+    if (this.themeListeners.has(callback)) {
+      return
+    }
+
+    const listener: EventListener = event => {
+      callback((event as CustomEvent<{ theme: string }>).detail.theme)
+    }
+
+    this.themeListeners.set(callback, listener)
+    document.addEventListener('themechange', listener)
   }
 
   /**
    * 移除主题变更监听器
    */
   offThemeChange(callback: (theme: string) => void): void {
-    document.removeEventListener('themechange', (event: any) => {
-      callback(event.detail.theme)
-    })
+    const listener = this.themeListeners.get(callback)
+    if (!listener) {
+      return
+    }
+
+    document.removeEventListener('themechange', listener)
+    this.themeListeners.delete(callback)
   }
 }