perf: 前端按需引入 Element Plus + Vite 拆包 + template 优化

frontend/src/main.ts

@@ -1,21 +1,24 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
-import * as ElIcons from '@element-plus/icons-vue'
+// 程序化 API 组件手动引入（按需引入不自动包含）
+import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'
+import 'element-plus/es/components/message/style/css'
+import 'element-plus/es/components/message-box/style/css'
+import 'element-plus/es/components/notification/style/css'
+import 'element-plus/es/components/loading/style/css'
 import App from './App.vue'
 import router from './router'
 import './assets/main.css'
 
 const app = createApp(App)
 
-// Register all Element Plus icons globally
-for (const [name, component] of Object.entries(ElIcons)) {
-  app.component(name, component)
-}
-
 app.use(createPinia())
 app.use(router)
-app.use(ElementPlus)
 app.mount('#app')
+
+// 确保程序化 API 在 setup 外也可用（已全局引用，不 tree-shake）
+ElMessage
+ElMessageBox
+ElNotification
+ElLoading

frontend/src/views/NotificationLogs.vue

@@ -83,7 +83,7 @@
         </el-descriptions>
         <div class="detail-section">
           <div class="detail-label">Payload</div>
-          <pre class="code-block">{{ JSON.stringify(detailRow.payload, null, 2) }}</pre>
+          <pre class="code-block">{{ detailPayloadText }}</pre>
         </div>
         <div v-if="detailRow.response_text" class="detail-section">
           <div class="detail-label">响应</div>
@@ -123,6 +123,8 @@ const eventTagType = (e: string) =>
 const toUTC = (t: string) => /[Z+\-]\d*$/.test(t.trim()) ? t : t + 'Z'
 const fmtTime = (t: string) => dayjs(toUTC(t)).format('MM-DD HH:mm:ss')
 
+const detailPayloadText = computed(() => detailRow.value ? JSON.stringify(detailRow.value.payload, null, 2) : '')
+
 
 async function loadList() {
   tableLoading.value = true

frontend/src/views/Upstreams.vue

@@ -428,7 +428,7 @@
 
           <div v-if="expandedId === snap.id" class="snap-body">
             <el-table
-              :data="groupRows(snap.snapshot)"
+              :data="groupRows(snap)"
               size="small"
               :header-cell-style="{ background: 'rgba(255, 244, 232, 0.02)', color: 'var(--text-soft)' }"
               :cell-style="{ background: 'transparent', color: 'var(--text-primary)' }"
@@ -725,9 +725,15 @@ const toUTC = (t: string) => /[Z+\-]\d*$/.test(t.trim()) ? t : `${t}Z`
 const fmtTime = (t: string) => dayjs(toUTC(t)).format('MM-DD HH:mm:ss')
 const fmtTimeFull = (t: string) => dayjs(toUTC(t)).format('YYYY-MM-DD HH:mm:ss')
 
-function groupRows(snapshot: any) {
-  if (!snapshot?.groups) return []
-  return Object.values(snapshot.groups) as any[]
+const _groupRowsCache = new Map<number, any[]>()
+
+function groupRows(snap: { id: number; snapshot: any }) {
+  if (!snap?.snapshot?.groups) return []
+  const cached = _groupRowsCache.get(snap.id)
+  if (cached) return cached
+  const rows = Object.values(snap.snapshot.groups) as any[]
+  _groupRowsCache.set(snap.id, rows)
+  return rows
 }
 
 function shrinkError(value: string) {
@@ -833,6 +839,7 @@ function openDetail(row: UpstreamData) {
   generatedKeys.value = []
   snapshotOffset.value = 0
   expandedId.value = null
+  _groupRowsCache.clear()
   detailVisible.value = true
 }
 
@@ -854,6 +861,7 @@ async function loadSnapshots() {
   try {
     const res = await upstreamsApi.listSnapshots(detailUpstream.value.id, snapshotLimit, snapshotOffset.value)
     snapshots.value = res.data
+    _groupRowsCache.clear()
     if (res.data.length > 0 && expandedId.value === null) {
       expandedId.value = res.data[0].id
     }