befly-admin-ui 1.10.17 → 1.10.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "befly-admin-ui",
-    "version": "1.10.17",
+    "version": "1.10.18",
     "gitHead": "071d17be177355cdd61f30659c6e4c5873f87d39",
     "private": false,
     "description": "Befly - 管理后台功能组件",

package/views/index/components/environmentInfo.vue

@@ -15,8 +15,8 @@
                     <span class="env-value">{{ $Data.environmentInfo.server }}</span>
                 </div>
                 <div class="env-compact-item">
-                    <span class="env-label">Node版本</span>
-                    <span class="env-value">{{ $Data.environmentInfo.nodeVersion }}</span>
+                    <span class="env-label">运行时</span>
+                    <span class="env-value">{{ $Data.environmentInfo.runtimeVersion || $Data.environmentInfo.nodeVersion }}</span>
                 </div>
                 <div class="env-compact-item">
                     <span class="env-label">数据库</span>
@@ -46,6 +46,7 @@ const $Data = reactive({
     environmentInfo: {
         os: "",
         server: "",
+        runtimeVersion: "",
         nodeVersion: "",
         database: "",
         cache: "",

package/views/index/components/performanceMetrics.vue

@@ -26,15 +26,21 @@
                 </div>
                 <div class="perf-metric">
                     <div class="perf-info">
-                        <div class="perf-label">活跃连接</div>
-                        <div class="perf-value">{{ $Data.performanceMetrics.activeConnections }}</div>
+                        <div class="perf-label">活跃请求</div>
+                        <div class="perf-value">{{ $Data.performanceMetrics.activeRequests }}</div>
                     </div>
                 </div>
             </div>
-            <!-- 最慢接口提示 -->
-            <div v-if="$Data.performanceMetrics.slowestApi" class="perf-slowest">
+            <!-- 最慢接口列表 -->
+            <div v-if="$Data.slowestApis.length > 0" class="perf-slowest">
                 <ErrorTriangleIcon />
-                <span>最慢接口: {{ $Data.performanceMetrics.slowestApi.path }} ({{ $Data.performanceMetrics.slowestApi.time }}ms)</span>
+                <div class="perf-slowest-list">
+                    <div v-for="(item, index) in $Data.slowestApis" :key="`${item.path}-${index}`" class="perf-slowest-item">
+                        <span class="perf-slowest-rank">{{ index + 1 }}.</span>
+                        <span class="perf-slowest-path">{{ item.path }}</span>
+                        <span class="perf-slowest-time">{{ item.time }}ms</span>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -52,16 +58,44 @@ const $Data = reactive({
         avgResponseTime: 0,
         qps: 0,
         errorRate: 0,
+        activeRequests: 0,
         activeConnections: 0,
-        slowestApi: null
-    }
+        slowestApi: null,
+        slowestApis: []
+    },
+    slowestApis: []
 });
 
 const $Method = {
+    normalizeSlowestApis: function (resData) {
+        const apiList = [];
+
+        if (Array.isArray(resData?.slowestApis) && resData.slowestApis.length > 0) {
+            for (const item of resData.slowestApis) {
+                if (!item || !item.path) {
+                    continue;
+                }
+
+                apiList.push({
+                    path: String(item.path),
+                    time: Number(item.time || 0)
+                });
+            }
+        } else if (resData?.slowestApi?.path) {
+            apiList.push({
+                path: String(resData.slowestApi.path),
+                time: Number(resData.slowestApi.time || 0)
+            });
+        }
+
+        return apiList.slice(0, 3);
+    },
     fetchData: async function () {
         try {
             const res = await $Http("/core/dashboard/performanceMetrics", {}, [""]);
             Object.assign($Data.performanceMetrics, res.data);
+            $Data.performanceMetrics.activeRequests = Number(res.data?.activeRequests ?? res.data?.activeConnections ?? 0);
+            $Data.slowestApis = $Method.normalizeSlowestApis(res.data);
         } catch (_error) {
             // 静默失败：不阻断页面展示
         }
@@ -139,6 +173,37 @@ $Method.fetchData();
     font-size: 12px;
     color: var(--warning-color);
     word-break: break-word;
+
+    .perf-slowest-list {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+    }
+
+    .perf-slowest-item {
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+        min-width: 0;
+    }
+
+    .perf-slowest-rank {
+        font-weight: 700;
+    }
+
+    .perf-slowest-path {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+    }
+
+    .perf-slowest-time {
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+    }
 }
 
 .warning-tip {

package/views/index/components/systemOverview.vue

@@ -219,7 +219,8 @@ const $Data = reactive({
     },
     productState: {
         selectedKey: "",
-        options: []
+        options: [],
+        loading: false
     },
     uaStats: {
         deviceTypes: [],
@@ -325,6 +326,153 @@ const $Method = {
     },
     selectProduct: function (productKey) {
         $Data.productState.selectedKey = String(productKey || "");
+        $Method.fetchProductStats($Data.productState.selectedKey);
+    },
+    getSelectedProductName: function (selectedKey) {
+        if (!selectedKey || selectedKey === "all-products") {
+            return "";
+        }
+
+        const selected = $Data.productState.options.find((item) => item.key === selectedKey);
+
+        if (selected?.productName) {
+            return String(selected.productName);
+        }
+
+        return String(selectedKey);
+    },
+    applyOnlineStatsData: function (onlineStatsData) {
+        $Data.realtimeStats.onlineCount = Number(onlineStatsData?.onlineCount || 0);
+        $Data.realtimeStats.todayPv = Number(onlineStatsData?.today?.pv || 0);
+        $Data.realtimeStats.todayUv = Number(onlineStatsData?.today?.uv || 0);
+        $Data.realtimeStats.days = Array.isArray(onlineStatsData?.days) ? onlineStatsData.days : [];
+    },
+    applyInfoStatsData: function (infoStatsData) {
+        $Data.uaStats.deviceTypes = Array.isArray(infoStatsData?.today?.deviceTypes) ? infoStatsData.today.deviceTypes : [];
+        $Data.uaStats.browsers = Array.isArray(infoStatsData?.today?.browsers) ? infoStatsData.today.browsers : [];
+        $Data.uaStats.browserVersions = Array.isArray(infoStatsData?.today?.browserVersions) ? infoStatsData.today.browserVersions : [];
+        $Data.uaStats.osList = Array.isArray(infoStatsData?.today?.osList) ? infoStatsData.today.osList : [];
+        $Data.uaStats.osVersions = Array.isArray(infoStatsData?.today?.osVersions) ? infoStatsData.today.osVersions : [];
+        $Data.uaStats.deviceVendors = Array.isArray(infoStatsData?.today?.deviceVendors) ? infoStatsData.today.deviceVendors : [];
+        $Data.uaStats.deviceModels = Array.isArray(infoStatsData?.today?.deviceModels) ? infoStatsData.today.deviceModels : [];
+        $Data.uaStats.engines = Array.isArray(infoStatsData?.today?.engines) ? infoStatsData.today.engines : [];
+        $Data.uaStats.cpuArchitectures = Array.isArray(infoStatsData?.today?.cpuArchitectures) ? infoStatsData.today.cpuArchitectures : [];
+    },
+    mapProductOptions: function (onlineStatsData) {
+        if (!Array.isArray(onlineStatsData?.products)) {
+            return [];
+        }
+
+        return onlineStatsData.products.map((item) => {
+            return {
+                key: String(item?.key || item?.productName || ""),
+                productName: String(item?.productName || "-"),
+                today: {
+                    pv: Number(item?.today?.pv || 0),
+                    uv: Number(item?.today?.uv || 0)
+                },
+                week: {
+                    pv: Number(item?.week?.pv || 0),
+                    uv: Number(item?.week?.uv || 0)
+                },
+                month: {
+                    pv: Number(item?.month?.pv || 0),
+                    uv: Number(item?.month?.uv || 0)
+                },
+                days: Array.isArray(item?.days) ? item.days : [],
+                totalPv: Number(item?.totalPv || 0),
+                totalUv: Number(item?.totalUv || 0)
+            };
+        });
+    },
+    useSingleProductFallback: function (onlineStatsData) {
+        const days = Array.isArray(onlineStatsData?.days) ? onlineStatsData.days : [];
+
+        return [
+            {
+                key: $Data.productInfo.productName,
+                productName: $Data.productInfo.productName,
+                today: {
+                    pv: Number(onlineStatsData?.today?.pv || 0),
+                    uv: Number(onlineStatsData?.today?.uv || 0)
+                },
+                week: {
+                    pv: Number(onlineStatsData?.week?.pv || 0),
+                    uv: Number(onlineStatsData?.week?.uv || 0)
+                },
+                month: {
+                    pv: Number(onlineStatsData?.month?.pv || 0),
+                    uv: Number(onlineStatsData?.month?.uv || 0)
+                },
+                days: days,
+                totalPv: $Method.sumTrendField(days, "pv"),
+                totalUv: $Method.sumTrendField(days, "uv")
+            }
+        ];
+    },
+    applyProductOptions: function (onlineStatsData, infoStatsData) {
+        $Data.productState.options = $Method.mapProductOptions(onlineStatsData);
+
+        const onlyOneProduct = Array.isArray(infoStatsData?.month?.productNames) && infoStatsData.month.productNames.length === 1;
+
+        if (onlyOneProduct && $Data.productInfo.productName !== "-") {
+            $Data.productState.options = $Method.useSingleProductFallback(onlineStatsData);
+        }
+    },
+    updateSelectedProductOption: function (selectedKey, onlineStatsData) {
+        if (!selectedKey || selectedKey === "all-products") {
+            return;
+        }
+
+        const selectedIndex = $Data.productState.options.findIndex((item) => item.key === selectedKey);
+
+        if (selectedIndex < 0) {
+            return;
+        }
+
+        const days = Array.isArray(onlineStatsData?.days) ? onlineStatsData.days : [];
+        const current = $Data.productState.options[selectedIndex];
+
+        $Data.productState.options[selectedIndex] = {
+            key: current.key,
+            productName: current.productName,
+            today: {
+                pv: Number(onlineStatsData?.today?.pv || 0),
+                uv: Number(onlineStatsData?.today?.uv || 0)
+            },
+            week: {
+                pv: Number(onlineStatsData?.week?.pv || 0),
+                uv: Number(onlineStatsData?.week?.uv || 0)
+            },
+            month: {
+                pv: Number(onlineStatsData?.month?.pv || 0),
+                uv: Number(onlineStatsData?.month?.uv || 0)
+            },
+            days: days,
+            totalPv: $Method.sumTrendField(days, "pv"),
+            totalUv: $Method.sumTrendField(days, "uv")
+        };
+    },
+    fetchProductStats: async function (selectedKey) {
+        if ($Data.productState.loading) {
+            return;
+        }
+
+        $Data.productState.loading = true;
+
+        try {
+            const productName = $Method.getSelectedProductName(selectedKey);
+            const requestBody = productName ? { productName: productName } : {};
+            const [onlineStatsRes, infoStatsRes] = await Promise.all([$Http("/core/tongJi/onlineStats", requestBody, [""]), $Http("/core/tongJi/infoStats", requestBody, [""])]);
+
+            $Method.applyOnlineStatsData(onlineStatsRes.data);
+            $Method.applyInfoStatsData(infoStatsRes.data);
+            $Method.updateSelectedProductOption(selectedKey, onlineStatsRes.data);
+        } catch (_error) {
+            // 静默失败：不阻断页面展示
+        } finally {
+            $Data.productState.loading = false;
+        }
     },
     sumTrendField: function (list, field) {
         let total = 0;
@@ -439,68 +587,12 @@ const $Method = {
             const [overviewRes, onlineStatsRes, infoStatsRes, errorStatsRes] = await Promise.all([$Http("/core/dashboard/systemOverview", {}, [""]), $Http("/core/tongJi/onlineStats", {}, [""]), $Http("/core/tongJi/infoStats", {}, [""]), $Http("/core/tongJi/errorStats", {}, [""])]);
 
             Object.assign($Data.permissionStats, overviewRes.data);
-            $Data.realtimeStats.onlineCount = Number(onlineStatsRes.data?.onlineCount || 0);
-            $Data.realtimeStats.todayPv = Number(onlineStatsRes.data?.today?.pv || 0);
-            $Data.realtimeStats.todayUv = Number(onlineStatsRes.data?.today?.uv || 0);
-            $Data.realtimeStats.days = Array.isArray(onlineStatsRes.data?.days) ? onlineStatsRes.data.days : [];
+            $Method.applyOnlineStatsData(onlineStatsRes.data);
             $Data.productInfo.productName = String($Config.productName || "-");
             $Data.productInfo.productCode = String($Config.productCode || "-");
             $Data.productInfo.productVersion = String($Config.productVersion || "-");
-            $Data.productState.options = Array.isArray(onlineStatsRes.data?.products)
-                ? onlineStatsRes.data.products.map((item) => {
-                      return {
-                          key: String(item?.key || item?.productName || ""),
-                          productName: String(item?.productName || "-"),
-                          today: {
-                              pv: Number(item?.today?.pv || 0),
-                              uv: Number(item?.today?.uv || 0)
-                          },
-                          week: {
-                              pv: Number(item?.week?.pv || 0),
-                              uv: Number(item?.week?.uv || 0)
-                          },
-                          month: {
-                              pv: Number(item?.month?.pv || 0),
-                              uv: Number(item?.month?.uv || 0)
-                          },
-                          days: Array.isArray(item?.days) ? item.days : [],
-                          totalPv: Number(item?.totalPv || 0),
-                          totalUv: Number(item?.totalUv || 0)
-                      };
-                  })
-                : [];
-            if (Array.isArray(infoStatsRes.data?.month?.productNames) && infoStatsRes.data.month.productNames.length === 1 && $Data.productInfo.productName !== "-") {
-                $Data.productState.options = [
-                    {
-                        key: $Data.productInfo.productName,
-                        productName: $Data.productInfo.productName,
-                        today: {
-                            pv: $Data.realtimeStats.todayPv,
-                            uv: $Data.realtimeStats.todayUv
-                        },
-                        week: {
-                            pv: Number(onlineStatsRes.data?.week?.pv || 0),
-                            uv: Number(onlineStatsRes.data?.week?.uv || 0)
-                        },
-                        month: {
-                            pv: Number(onlineStatsRes.data?.month?.pv || 0),
-                            uv: Number(onlineStatsRes.data?.month?.uv || 0)
-                        },
-                        days: $Data.realtimeStats.days,
-                        totalPv: $Method.sumTrendField($Data.realtimeStats.days, "pv"),
-                        totalUv: $Method.sumTrendField($Data.realtimeStats.days, "uv")
-                    }
-                ];
-            }
-            $Data.uaStats.deviceTypes = Array.isArray(infoStatsRes.data?.today?.deviceTypes) ? infoStatsRes.data.today.deviceTypes : [];
-            $Data.uaStats.browsers = Array.isArray(infoStatsRes.data?.today?.browsers) ? infoStatsRes.data.today.browsers : [];
-            $Data.uaStats.browserVersions = Array.isArray(infoStatsRes.data?.today?.browserVersions) ? infoStatsRes.data.today.browserVersions : [];
-            $Data.uaStats.osList = Array.isArray(infoStatsRes.data?.today?.osList) ? infoStatsRes.data.today.osList : [];
-            $Data.uaStats.osVersions = Array.isArray(infoStatsRes.data?.today?.osVersions) ? infoStatsRes.data.today.osVersions : [];
-            $Data.uaStats.deviceVendors = Array.isArray(infoStatsRes.data?.today?.deviceVendors) ? infoStatsRes.data.today.deviceVendors : [];
-            $Data.uaStats.deviceModels = Array.isArray(infoStatsRes.data?.today?.deviceModels) ? infoStatsRes.data.today.deviceModels : [];
-            $Data.uaStats.engines = Array.isArray(infoStatsRes.data?.today?.engines) ? infoStatsRes.data.today.engines : [];
-            $Data.uaStats.cpuArchitectures = Array.isArray(infoStatsRes.data?.today?.cpuArchitectures) ? infoStatsRes.data.today.cpuArchitectures : [];
+            $Method.applyProductOptions(onlineStatsRes.data, infoStatsRes.data);
+            $Method.applyInfoStatsData(infoStatsRes.data);
             $Data.errorStats.trend = Array.isArray(errorStatsRes.data?.trend) ? errorStatsRes.data.trend : [];
             $Method.ensureSelectedProduct();
         } catch (_error) {