befly-admin-ui 1.8.33 → 1.8.34

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "befly-admin-ui",
-    "version": "1.8.33",
-    "gitHead": "84b6e4e0adde7f566cfc890887b024ccf10b0516",
+    "version": "1.8.34",
+    "gitHead": "c47d1e515dabe142531e0a8415979cccb2729259",
     "private": false,
     "description": "Befly - 管理后台功能组件",
     "keywords": [

package/views/index/components/systemOverview.vue

@@ -49,10 +49,10 @@
                         <div class="card-title">统计信息</div>
                     </div>
 
-                    <div class="product-switch-list">
-                        <button v-for="item in productOptions" :key="item.key" type="button" class="product-switch" :class="{ active: item.key === selectedProduct?.key }" @click="selectProduct(item.key)">
-                            <span class="product-switch-name">{{ item.productName }}</span>
-                        </button>
+                    <div class="product-select-wrap">
+                        <TSelect :model-value="productState.selectedKey" class="product-select" placeholder="请选择产品" @change="selectProduct">
+                            <TOption v-for="item in productOptions" :key="item.key" :value="item.key" :label="item.productName" />
+                        </TSelect>
                     </div>
                 </div>
 
@@ -191,6 +191,7 @@
 
 <script setup>
 import { computed, reactive } from "vue";
+import { Option as TOption, Select as TSelect } from "tdesign-vue-next";
 import { InfoCircleIcon, TrendingUpIcon } from "tdesign-icons-vue-next";
 
 import { $Config } from "@/plugins/config";
@@ -250,12 +251,29 @@ const errorTodayCount = computed(() => {
 
 const productOptions = computed(() => {
     const list = Array.isArray(productState.options) ? productState.options.slice() : [];
+    const fallbackProduct = buildFallbackProduct();
 
-    if (list.length > 0) {
-        return list;
+    if (list.length === 0) {
+        return [fallbackProduct];
     }
 
-    return [buildFallbackProduct()];
+    list.sort((a, b) => {
+        if (a.productName === productInfo.productName && b.productName !== productInfo.productName) {
+            return -1;
+        }
+
+        if (b.productName === productInfo.productName && a.productName !== productInfo.productName) {
+            return 1;
+        }
+
+        if (Number(b.totalPv || 0) !== Number(a.totalPv || 0)) {
+            return Number(b.totalPv || 0) - Number(a.totalPv || 0);
+        }
+
+        return String(a.productName || "").localeCompare(String(b.productName || ""), "zh-CN");
+    });
+
+    return [fallbackProduct, ...list];
 });
 
 const selectedProduct = computed(() => {
@@ -269,31 +287,6 @@ const selectedProduct = computed(() => {
     return matched || list[0];
 });
 
-const selectedProductToday = computed(() => {
-    return (
-        selectedProduct.value?.today || {
-            pv: 0,
-            uv: 0
-        }
-    );
-});
-
-const selectedProductTotalPv = computed(() => {
-    if (selectedProduct.value?.totalPv !== undefined) {
-        return Number(selectedProduct.value.totalPv || 0);
-    }
-
-    return sumTrendField(selectedProduct.value?.days || [], "pv");
-});
-
-const selectedProductTotalUv = computed(() => {
-    if (selectedProduct.value?.totalUv !== undefined) {
-        return Number(selectedProduct.value.totalUv || 0);
-    }
-
-    return sumTrendField(selectedProduct.value?.days || [], "uv");
-});
-
 const selectedDaysTrend = computed(() => sortTrendList(selectedProduct.value?.days || [], "reportDate"));
 const selectedDaysFilled = computed(() => buildFilledTrendDays(selectedProduct.value?.days || [], 30));
 const selectedDaysHasData = computed(() => selectedDaysTrend.value.length > 0);
@@ -321,7 +314,7 @@ function buildFallbackProduct() {
 
     return {
         key: "all-products",
-        productName: productInfo.productName,
+        productName: "全部产品",
         productCode: productInfo.productCode,
         productVersion: productInfo.productVersion,
         today: {
@@ -406,8 +399,8 @@ function ensureSelectedProduct() {
         return;
     }
 
-    const currentProduct = list.find((item) => item.productCode === productInfo.productCode && item.productVersion === productInfo.productVersion);
-    productState.selectedKey = currentProduct?.key || list[0].key;
+    const currentProduct = list.find((item) => item.productName === productInfo.productName);
+    productState.selectedKey = currentProduct?.key || "all-products";
 }
 
 function selectProduct(productKey) {
@@ -538,7 +531,55 @@ const fetchData = async () => {
         realtimeStats.todayPv = Number(onlineStatsRes.data?.today?.pv || 0);
         realtimeStats.todayUv = Number(onlineStatsRes.data?.today?.uv || 0);
         realtimeStats.days = Array.isArray(onlineStatsRes.data?.days) ? onlineStatsRes.data.days : [];
-        productState.options = [];
+        productInfo.productName = String($Config.productName || "-");
+        productInfo.productCode = String($Config.productCode || "-");
+        productInfo.productVersion = String($Config.productVersion || "-");
+        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 && productInfo.productName !== "-") {
+            productState.options = [
+                {
+                    key: productInfo.productName,
+                    productName: productInfo.productName,
+                    today: {
+                        pv: realtimeStats.todayPv,
+                        uv: 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: realtimeStats.days,
+                    totalPv: sumTrendField(realtimeStats.days, "pv"),
+                    totalUv: sumTrendField(realtimeStats.days, "uv")
+                }
+            ];
+        }
         uaStats.deviceTypes = Array.isArray(infoStatsRes.data?.today?.deviceTypes) ? infoStatsRes.data.today.deviceTypes : [];
         uaStats.browsers = Array.isArray(infoStatsRes.data?.today?.browsers) ? infoStatsRes.data.today.browsers : [];
         uaStats.browserVersions = Array.isArray(infoStatsRes.data?.today?.browserVersions) ? infoStatsRes.data.today.browserVersions : [];
@@ -549,9 +590,6 @@ const fetchData = async () => {
         uaStats.engines = Array.isArray(infoStatsRes.data?.today?.engines) ? infoStatsRes.data.today.engines : [];
         uaStats.cpuArchitectures = Array.isArray(infoStatsRes.data?.today?.cpuArchitectures) ? infoStatsRes.data.today.cpuArchitectures : [];
         errorStats.trend = Array.isArray(errorStatsRes.data?.trend) ? errorStatsRes.data.trend : [];
-        productInfo.productName = String($Config.productName || "-");
-        productInfo.productCode = String($Config.productCode || "-");
-        productInfo.productVersion = String($Config.productVersion || "-");
         ensureSelectedProduct();
     } catch (_error) {
         // 静默失败：不阻断页面展示
@@ -710,47 +748,13 @@ fetchData();
     color: var(--text-primary);
 }
 
-.product-switch-list {
+.product-select-wrap {
     display: flex;
-    flex-wrap: wrap;
     justify-content: flex-end;
-    gap: 8px;
 }
 
-.product-switch {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 0;
-    min-height: 36px;
-    padding: 0 12px;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.88);
-    color: var(--text-primary);
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover {
-        border-color: rgba(var(--primary-color-rgb), 0.3);
-        background: rgba(var(--primary-color-rgb), 0.05);
-    }
-
-    &.active {
-        border-color: rgba(var(--primary-color-rgb), 0.45);
-        background: rgba(var(--primary-color-rgb), 0.08);
-        box-shadow: inset 0 0 0 1px rgba(var(--primary-color-rgb), 0.08);
-    }
-}
-
-.product-switch-name {
-    max-width: 160px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 0.2px;
+.product-select {
+    width: 220px;
 }
 
 .product-metrics-grid {
@@ -1100,7 +1104,8 @@ fetchData();
         align-items: flex-start;
     }
 
-    .product-switch-list {
+    .product-select-wrap {
+        width: 100%;
         justify-content: flex-start;
     }
 
@@ -1128,7 +1133,7 @@ fetchData();
         min-height: 0;
     }
 
-    .product-switch {
+    .product-select {
         width: 100%;
     }