befly-admin-ui 1.10.1 → 1.10.2

package/views/index/components/systemOverview.vue

@@ -9,35 +9,35 @@
             <div class="summary-grid">
                 <div class="summary-card overview-card-small stat-primary">
                     <div class="summary-content">
-                        <div class="summary-value">{{ permissionStats.menuCount }}</div>
+                        <div class="summary-value">{{ $Data.permissionStats.menuCount }}</div>
                         <div class="summary-label">菜单总数</div>
                     </div>
                 </div>
 
                 <div class="summary-card overview-card-small stat-success">
                     <div class="summary-content">
-                        <div class="summary-value">{{ permissionStats.apiCount }}</div>
+                        <div class="summary-value">{{ $Data.permissionStats.apiCount }}</div>
                         <div class="summary-label">接口总数</div>
                     </div>
                 </div>
 
                 <div class="summary-card overview-card-small stat-warning">
                     <div class="summary-content">
-                        <div class="summary-value">{{ permissionStats.roleCount }}</div>
+                        <div class="summary-value">{{ $Data.permissionStats.roleCount }}</div>
                         <div class="summary-label">角色总数</div>
                     </div>
                 </div>
 
                 <div class="summary-card overview-card-small stat-danger">
                     <div class="summary-content">
-                        <div class="summary-value">{{ realtimeStats.onlineCount }}</div>
+                        <div class="summary-value">{{ $Data.realtimeStats.onlineCount }}</div>
                         <div class="summary-label">当前在线</div>
                     </div>
                 </div>
 
                 <div class="summary-card overview-card-small stat-critical">
                     <div class="summary-content">
-                        <div class="summary-value">{{ errorTodayCount }}</div>
+                        <div class="summary-value">{{ $Computed.errorTodayCount }}</div>
                         <div class="summary-label">今日错误</div>
                     </div>
                 </div>
@@ -50,14 +50,14 @@
                     </div>
 
                     <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 :model-value="$Data.productState.selectedKey" class="product-select" placeholder="请选择产品" @change="$Method.selectProduct">
+                            <TOption v-for="item in $Computed.productOptions" :key="item.key" :value="item.key" :label="item.productName" />
                         </TSelect>
                     </div>
                 </div>
 
                 <div class="product-metrics-grid">
-                    <div v-for="item in productPeriodCards" :key="item.key" class="metric-box metric-box-period">
+                    <div v-for="item in $Computed.productPeriodCards" :key="item.key" class="metric-box metric-box-period">
                         <div class="metric-period-label">{{ item.label }}</div>
                         <div class="metric-pair-row">
                             <span class="metric-pair-name">PV</span>
@@ -84,20 +84,20 @@
                         </div>
                     </div>
 
-                    <div v-if="selectedDaysHasData" class="trend-content">
+                    <div v-if="$Computed.selectedDaysHasData" class="trend-content">
                         <div class="trend-bars">
-                            <div v-for="item in selectedDaysBars" :key="item.reportDate" class="trend-bar-group">
+                            <div v-for="item in $Computed.selectedDaysBars" :key="item.reportDate" class="trend-bar-group">
                                 <div class="trend-bar-stack">
-                                    <div class="trend-bar trend-bar-pv" :style="{ height: item.pvHeight }" :title="`${formatReportDate(item.reportDate)} PV ${item.pv}`"></div>
-                                    <div class="trend-bar trend-bar-uv" :style="{ height: item.uvHeight }" :title="`${formatReportDate(item.reportDate)} UV ${item.uv}`"></div>
+                                    <div class="trend-bar trend-bar-pv" :style="{ height: item.pvHeight }" :title="`${$Method.formatReportDate(item.reportDate)} PV ${item.pv}`"></div>
+                                    <div class="trend-bar trend-bar-uv" :style="{ height: item.uvHeight }" :title="`${$Method.formatReportDate(item.reportDate)} UV ${item.uv}`"></div>
                                 </div>
-                                <div class="trend-bar-label">{{ formatReportDate(item.reportDate) }}</div>
+                                <div class="trend-bar-label">{{ $Method.formatReportDate(item.reportDate) }}</div>
                             </div>
                         </div>
 
                         <div class="trend-briefs trend-briefs-wide">
-                            <div v-for="item in selectedDaysTrendPreview" :key="item.reportDate" class="trend-brief-item">
-                                <div class="trend-date">{{ formatReportDate(item.reportDate) }}</div>
+                            <div v-for="item in $Computed.selectedDaysTrendPreview" :key="item.reportDate" class="trend-brief-item">
+                                <div class="trend-date">{{ $Method.formatReportDate(item.reportDate) }}</div>
                                 <div class="trend-values">
                                     <span class="trend-value pv">{{ item.pv }}</span>
                                     <span class="trend-value uv">{{ item.uv }}</span>
@@ -113,9 +113,9 @@
             <div class="ua-grid">
                 <div class="ua-card overview-card-small">
                     <div class="ua-card-title">设备类型</div>
-                    <div v-if="uaStats.deviceTypes.length > 0" class="ua-list">
-                        <div v-for="item in uaStats.deviceTypes.slice(0, 5)" :key="`device-type-${item.name}`" class="ua-list-item">
-                            <span class="ua-list-name">{{ formatDeviceType(item.name) }}</span>
+                    <div v-if="$Data.uaStats.deviceTypes.length > 0" class="ua-list">
+                        <div v-for="item in $Data.uaStats.deviceTypes.slice(0, 5)" :key="`device-type-${item.name}`" class="ua-list-item">
+                            <span class="ua-list-name">{{ $Method.formatDeviceType(item.name) }}</span>
                             <span class="ua-list-count">{{ item.count }}</span>
                         </div>
                     </div>
@@ -124,8 +124,8 @@
 
                 <div class="ua-card overview-card-small">
                     <div class="ua-card-title">浏览器分布</div>
-                    <div v-if="uaStats.browsers.length > 0" class="ua-list">
-                        <div v-for="item in uaStats.browsers.slice(0, 5)" :key="`browser-${item.name}`" class="ua-list-item">
+                    <div v-if="$Data.uaStats.browsers.length > 0" class="ua-list">
+                        <div v-for="item in $Data.uaStats.browsers.slice(0, 5)" :key="`browser-${item.name}`" class="ua-list-item">
                             <span class="ua-list-name">{{ item.name }}</span>
                             <span class="ua-list-count">{{ item.count }}</span>
                         </div>
@@ -135,8 +135,8 @@
 
                 <div class="ua-card overview-card-small">
                     <div class="ua-card-title">操作系统分布</div>
-                    <div v-if="uaStats.osList.length > 0" class="ua-list">
-                        <div v-for="item in uaStats.osList.slice(0, 5)" :key="`os-${item.name}`" class="ua-list-item">
+                    <div v-if="$Data.uaStats.osList.length > 0" class="ua-list">
+                        <div v-for="item in $Data.uaStats.osList.slice(0, 5)" :key="`os-${item.name}`" class="ua-list-item">
                             <span class="ua-list-name">{{ item.name }}</span>
                             <span class="ua-list-count">{{ item.count }}</span>
                         </div>
@@ -146,8 +146,8 @@
 
                 <div class="ua-card overview-card-small">
                     <div class="ua-card-title">设备厂商</div>
-                    <div v-if="uaStats.deviceVendors.length > 0" class="ua-list">
-                        <div v-for="item in uaStats.deviceVendors.slice(0, 5)" :key="`vendor-${item.name}`" class="ua-list-item">
+                    <div v-if="$Data.uaStats.deviceVendors.length > 0" class="ua-list">
+                        <div v-for="item in $Data.uaStats.deviceVendors.slice(0, 5)" :key="`vendor-${item.name}`" class="ua-list-item">
                             <span class="ua-list-name">{{ item.name }}</span>
                             <span class="ua-list-count">{{ item.count }}</span>
                         </div>
@@ -161,24 +161,24 @@
                     <div class="ua-meta-group">
                         <div class="ua-meta-block">
                             <div class="ua-meta-title">设备型号</div>
-                            <div v-if="uaStats.deviceModels.length > 0" class="ua-chip-list">
-                                <span v-for="item in uaStats.deviceModels.slice(0, 6)" :key="`model-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
+                            <div v-if="$Data.uaStats.deviceModels.length > 0" class="ua-chip-list">
+                                <span v-for="item in $Data.uaStats.deviceModels.slice(0, 6)" :key="`model-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
                             </div>
                             <div v-else class="ua-empty ua-empty-inline">暂无设备型号数据</div>
                         </div>
 
                         <div class="ua-meta-block">
                             <div class="ua-meta-title">渲染引擎</div>
-                            <div v-if="uaStats.engines.length > 0" class="ua-chip-list">
-                                <span v-for="item in uaStats.engines.slice(0, 6)" :key="`engine-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
+                            <div v-if="$Data.uaStats.engines.length > 0" class="ua-chip-list">
+                                <span v-for="item in $Data.uaStats.engines.slice(0, 6)" :key="`engine-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
                             </div>
                             <div v-else class="ua-empty ua-empty-inline">暂无渲染引擎数据</div>
                         </div>
 
                         <div class="ua-meta-block">
                             <div class="ua-meta-title">CPU 架构</div>
-                            <div v-if="uaStats.cpuArchitectures.length > 0" class="ua-chip-list">
-                                <span v-for="item in uaStats.cpuArchitectures.slice(0, 6)" :key="`cpu-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
+                            <div v-if="$Data.uaStats.cpuArchitectures.length > 0" class="ua-chip-list">
+                                <span v-for="item in $Data.uaStats.cpuArchitectures.slice(0, 6)" :key="`cpu-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
                             </div>
                             <div v-else class="ua-empty ua-empty-inline">暂无 CPU 架构数据</div>
                         </div>
@@ -194,409 +194,392 @@ 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";
-import { $Http } from "@/plugins/http";
-
-const permissionStats = reactive({
-    menuCount: 0,
-    apiCount: 0,
-    roleCount: 0
-});
-
-const realtimeStats = reactive({
-    onlineCount: 0,
-    todayPv: 0,
-    todayUv: 0,
-    days: []
-});
-
-const errorStats = reactive({
-    trend: []
-});
-
-const productInfo = reactive({
-    productName: String($Config.productName || "-"),
-    productCode: String($Config.productCode || "-"),
-    productVersion: String($Config.productVersion || "-")
-});
-
-const productState = reactive({
-    selectedKey: "",
-    options: []
-});
-
-const uaStats = reactive({
-    deviceTypes: [],
-    browsers: [],
-    browserVersions: [],
-    osList: [],
-    osVersions: [],
-    deviceVendors: [],
-    deviceModels: [],
-    engines: [],
-    cpuArchitectures: []
-});
-
-const errorTodayTrend = computed(() => sortTrendList(errorStats.trend, "bucketTime"));
-
-const errorTodayCount = computed(() => {
-    let total = 0;
-
-    for (const item of errorTodayTrend.value) {
-        total += Number(item.count || 0);
+import { $Config } from "@/plugins/config.js";
+import { $Http } from "@/plugins/http.js";
+
+const $Data = reactive({
+    permissionStats: {
+        menuCount: 0,
+        apiCount: 0,
+        roleCount: 0
+    },
+    realtimeStats: {
+        onlineCount: 0,
+        todayPv: 0,
+        todayUv: 0,
+        days: []
+    },
+    errorStats: {
+        trend: []
+    },
+    productInfo: {
+        productName: String($Config.productName || "-"),
+        productCode: String($Config.productCode || "-"),
+        productVersion: String($Config.productVersion || "-")
+    },
+    productState: {
+        selectedKey: "",
+        options: []
+    },
+    uaStats: {
+        deviceTypes: [],
+        browsers: [],
+        browserVersions: [],
+        osList: [],
+        osVersions: [],
+        deviceVendors: [],
+        deviceModels: [],
+        engines: [],
+        cpuArchitectures: []
     }
-
-    return total;
 });
 
-const productOptions = computed(() => {
-    const list = Array.isArray(productState.options) ? productState.options.slice() : [];
-    const fallbackProduct = buildFallbackProduct();
-
-    if (list.length === 0) {
-        return [fallbackProduct];
-    }
+const $Method = {
+    buildFallbackProduct() {
+        const days = $Method.sortTrendList($Data.realtimeStats.days, "reportDate");
+
+        return {
+            key: "all-products",
+            productName: "全部产品",
+            productCode: $Data.productInfo.productCode,
+            productVersion: $Data.productInfo.productVersion,
+            today: {
+                pv: Number($Data.realtimeStats.todayPv || 0),
+                uv: Number($Data.realtimeStats.todayUv || 0)
+            },
+            days: days,
+            totalPv: $Method.sumTrendField(days, "pv"),
+            totalUv: $Method.sumTrendField(days, "uv")
+        };
+    },
+    getReportDateNumber(timestamp) {
+        return Number(
+            new Intl.DateTimeFormat("en-CA", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit"
+            })
+                .format(timestamp)
+                .replace(/[^0-9]/g, "")
+        );
+    },
+    buildRecentReportDateList(limit) {
+        const list = [];
 
-    list.sort((a, b) => {
-        if (a.productName === productInfo.productName && b.productName !== productInfo.productName) {
-            return -1;
+        for (let i = limit - 1; i >= 0; i--) {
+            list.push($Method.getReportDateNumber(Date.now() - i * 24 * 60 * 60 * 1000));
         }
 
-        if (b.productName === productInfo.productName && a.productName !== productInfo.productName) {
-            return 1;
+        return list;
+    },
+    buildFilledTrendDays(list, limit) {
+        const dateList = $Method.buildRecentReportDateList(limit);
+        const dataMap = new Map();
+
+        for (const item of list) {
+            dataMap.set(Number(item?.reportDate || 0), {
+                reportDate: Number(item?.reportDate || 0),
+                pv: Number(item?.pv || 0),
+                uv: Number(item?.uv || 0)
+            });
         }
 
-        if (Number(b.totalPv || 0) !== Number(a.totalPv || 0)) {
-            return Number(b.totalPv || 0) - Number(a.totalPv || 0);
+        return dateList.map((reportDate) => {
+            return (
+                dataMap.get(reportDate) || {
+                    reportDate: reportDate,
+                    pv: 0,
+                    uv: 0
+                }
+            );
+        });
+    },
+    sumTrendRange(list) {
+        let pv = 0;
+        let uv = 0;
+
+        for (const item of list) {
+            pv += Number(item?.pv || 0);
+            uv += Number(item?.uv || 0);
         }
 
-        return String(a.productName || "").localeCompare(String(b.productName || ""), "zh-CN");
-    });
-
-    return [fallbackProduct, ...list];
-});
-
-const selectedProduct = computed(() => {
-    const list = productOptions.value;
-
-    if (list.length === 0) {
-        return null;
-    }
-
-    const matched = list.find((item) => item.key === productState.selectedKey);
-    return matched || list[0];
-});
+        return {
+            pv: pv,
+            uv: uv
+        };
+    },
+    ensureSelectedProduct() {
+        const list = $Computed.productOptions;
+
+        if (list.length === 0) {
+            $Data.productState.selectedKey = "";
+            return;
+        }
 
-const selectedDaysTrend = computed(() => sortTrendList(selectedProduct.value?.days || [], "reportDate"));
-const selectedDaysFilled = computed(() => buildFilledTrendDays(selectedProduct.value?.days || [], 30));
-const selectedDaysHasData = computed(() => selectedDaysTrend.value.length > 0);
-const selectedDaysTrendPreview = computed(() => buildTrendPreview(selectedDaysFilled.value, 10));
-const selectedDaysBars = computed(() => buildTrendBars(selectedDaysFilled.value, getTrendMax(selectedDaysFilled.value)));
-const productPeriodCards = computed(() => {
-    const list = selectedDaysFilled.value;
-    const today = list[list.length - 1] || { pv: 0, uv: 0 };
-    const yesterday = list[list.length - 2] || { pv: 0, uv: 0 };
-    const dayBeforeYesterday = list[list.length - 3] || { pv: 0, uv: 0 };
-    const recent7 = sumTrendRange(list.slice(-7));
-    const recent30 = sumTrendRange(list);
-
-    return [
-        { key: "today", label: "今日", pv: today.pv, uv: today.uv },
-        { key: "yesterday", label: "昨日", pv: yesterday.pv, uv: yesterday.uv },
-        { key: "dayBeforeYesterday", label: "前日", pv: dayBeforeYesterday.pv, uv: dayBeforeYesterday.uv },
-        { key: "recent7", label: "最近7天", pv: recent7.pv, uv: recent7.uv },
-        { key: "recent30", label: "最近30天", pv: recent30.pv, uv: recent30.uv }
-    ];
-});
+        if (list.some((item) => item.key === $Data.productState.selectedKey)) {
+            return;
+        }
 
-function buildFallbackProduct() {
-    const days = sortTrendList(realtimeStats.days, "reportDate");
-
-    return {
-        key: "all-products",
-        productName: "全部产品",
-        productCode: productInfo.productCode,
-        productVersion: productInfo.productVersion,
-        today: {
-            pv: Number(realtimeStats.todayPv || 0),
-            uv: Number(realtimeStats.todayUv || 0)
-        },
-        days: days,
-        totalPv: sumTrendField(days, "pv"),
-        totalUv: sumTrendField(days, "uv")
-    };
-}
-
-function getReportDateNumber(timestamp) {
-    return Number(
-        new Intl.DateTimeFormat("en-CA", {
-            year: "numeric",
-            month: "2-digit",
-            day: "2-digit"
-        })
-            .format(timestamp)
-            .replace(/[^0-9]/g, "")
-    );
-}
-
-function buildRecentReportDateList(limit) {
-    const list = [];
-
-    for (let i = limit - 1; i >= 0; i--) {
-        list.push(getReportDateNumber(Date.now() - i * 24 * 60 * 60 * 1000));
-    }
+        const currentProduct = list.find((item) => item.productName === $Data.productInfo.productName);
+        $Data.productState.selectedKey = currentProduct?.key || "all-products";
+    },
+    selectProduct(productKey) {
+        $Data.productState.selectedKey = String(productKey || "");
+    },
+    sumTrendField(list, field) {
+        let total = 0;
+
+        for (const item of list) {
+            total += Number(item?.[field] || 0);
+        }
 
-    return list;
-}
+        return total;
+    },
+    sortTrendList(list, keyField) {
+        const result = Array.isArray(list) ? list.slice() : [];
+
+        result.sort((a, b) => Number(a?.[keyField] || 0) - Number(b?.[keyField] || 0));
+        return result;
+    },
+    buildTrendPreview(list, maxCount) {
+        if (list.length <= maxCount) {
+            return list;
+        }
 
-function buildFilledTrendDays(list, limit) {
-    const dateList = buildRecentReportDateList(limit);
-    const dataMap = new Map();
+        const preview = [];
+        const usedIndex = new Set();
 
-    for (const item of list) {
-        dataMap.set(Number(item?.reportDate || 0), {
-            reportDate: Number(item?.reportDate || 0),
-            pv: Number(item?.pv || 0),
-            uv: Number(item?.uv || 0)
-        });
-    }
+        for (let i = 0; i < maxCount; i++) {
+            const index = Math.round((i * (list.length - 1)) / (maxCount - 1));
 
-    return dateList.map((reportDate) => {
-        return (
-            dataMap.get(reportDate) || {
-                reportDate: reportDate,
-                pv: 0,
-                uv: 0
+            if (usedIndex.has(index)) {
+                continue;
             }
-        );
-    });
-}
-
-function sumTrendRange(list) {
-    let pv = 0;
-    let uv = 0;
-
-    for (const item of list) {
-        pv += Number(item?.pv || 0);
-        uv += Number(item?.uv || 0);
-    }
-
-    return {
-        pv: pv,
-        uv: uv
-    };
-}
 
-function ensureSelectedProduct() {
-    const list = productOptions.value;
-
-    if (list.length === 0) {
-        productState.selectedKey = "";
-        return;
-    }
-
-    if (list.some((item) => item.key === productState.selectedKey)) {
-        return;
-    }
-
-    const currentProduct = list.find((item) => item.productName === productInfo.productName);
-    productState.selectedKey = currentProduct?.key || "all-products";
-}
-
-function selectProduct(productKey) {
-    productState.selectedKey = String(productKey || "");
-}
-
-function sumTrendField(list, field) {
-    let total = 0;
-
-    for (const item of list) {
-        total += Number(item?.[field] || 0);
-    }
-
-    return total;
-}
-
-function sortTrendList(list, keyField) {
-    const result = Array.isArray(list) ? list.slice() : [];
+            usedIndex.add(index);
+            preview.push(list[index]);
+        }
 
-    result.sort((a, b) => Number(a?.[keyField] || 0) - Number(b?.[keyField] || 0));
-    return result;
-}
+        return preview;
+    },
+    buildTrendBars(list, maxValue) {
+        const result = [];
+
+        for (const item of list) {
+            const pv = Number(item?.pv || 0);
+            const uv = Number(item?.uv || 0);
+
+            result.push({
+                reportDate: Number(item?.reportDate || 0),
+                pv: pv,
+                uv: uv,
+                pvHeight: pv > 0 ? `${Math.max((pv / maxValue) * 100, 6)}%` : "0%",
+                uvHeight: uv > 0 ? `${Math.max((uv / maxValue) * 100, 6)}%` : "0%"
+            });
+        }
 
-function buildTrendPreview(list, maxCount) {
-    if (list.length <= maxCount) {
-        return list;
-    }
+        return result;
+    },
+    getTrendMax(list) {
+        let max = 0;
 
-    const preview = [];
-    const usedIndex = new Set();
+        for (const item of list) {
+            const pv = Number(item?.pv || 0);
+            const uv = Number(item?.uv || 0);
 
-    for (let i = 0; i < maxCount; i++) {
-        const index = Math.round((i * (list.length - 1)) / (maxCount - 1));
+            if (pv > max) {
+                max = pv;
+            }
 
-        if (usedIndex.has(index)) {
-            continue;
+            if (uv > max) {
+                max = uv;
+            }
         }
 
-        usedIndex.add(index);
-        preview.push(list[index]);
-    }
-
-    return preview;
-}
+        return max > 0 ? max : 1;
+    },
+    formatDeviceType(deviceType) {
+        if (deviceType === "desktop") {
+            return "桌面端";
+        }
 
-function buildTrendBars(list, maxValue) {
-    const result = [];
+        if (deviceType === "mobile") {
+            return "移动端";
+        }
 
-    for (const item of list) {
-        const pv = Number(item?.pv || 0);
-        const uv = Number(item?.uv || 0);
+        if (deviceType === "tablet") {
+            return "平板";
+        }
 
-        result.push({
-            reportDate: Number(item?.reportDate || 0),
-            pv: pv,
-            uv: uv,
-            pvHeight: pv > 0 ? `${Math.max((pv / maxValue) * 100, 6)}%` : "0%",
-            uvHeight: uv > 0 ? `${Math.max((uv / maxValue) * 100, 6)}%` : "0%"
-        });
-    }
+        if (deviceType === "smarttv") {
+            return "电视";
+        }
 
-    return result;
-}
+        if (deviceType === "wearable") {
+            return "穿戴设备";
+        }
 
-function getTrendMax(list) {
-    let max = 0;
+        if (deviceType === "embedded") {
+            return "嵌入式设备";
+        }
 
-    for (const item of list) {
-        const pv = Number(item?.pv || 0);
-        const uv = Number(item?.uv || 0);
+        return String(deviceType || "Unknown");
+    },
+    formatReportDate(reportDate) {
+        const text = String(reportDate || "");
 
-        if (pv > max) {
-            max = pv;
+        if (text.length !== 8) {
+            return text;
         }
 
-        if (uv > max) {
-            max = uv;
+        return `${text.slice(4, 6)}-${text.slice(6, 8)}`;
+    },
+    async fetchData() {
+        try {
+            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 : [];
+            $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 : [];
+            $Data.errorStats.trend = Array.isArray(errorStatsRes.data?.trend) ? errorStatsRes.data.trend : [];
+            $Method.ensureSelectedProduct();
+        } catch (_error) {
+            // 静默失败：不阻断页面展示
         }
     }
+};
 
-    return max > 0 ? max : 1;
-}
-
-function formatDeviceType(deviceType) {
-    if (deviceType === "desktop") {
-        return "桌面端";
-    }
+const $Computed = reactive({
+    errorTodayTrend: computed(() => $Method.sortTrendList($Data.errorStats.trend, "bucketTime")),
+    errorTodayCount: computed(() => {
+        let total = 0;
 
-    if (deviceType === "mobile") {
-        return "移动端";
-    }
+        for (const item of $Computed.errorTodayTrend) {
+            total += Number(item.count || 0);
+        }
 
-    if (deviceType === "tablet") {
-        return "平板";
-    }
+        return total;
+    }),
+    productOptions: computed(() => {
+        const list = Array.isArray($Data.productState.options) ? $Data.productState.options.slice() : [];
+        const fallbackProduct = $Method.buildFallbackProduct();
 
-    if (deviceType === "smarttv") {
-        return "电视";
-    }
+        if (list.length === 0) {
+            return [fallbackProduct];
+        }
 
-    if (deviceType === "wearable") {
-        return "穿戴设备";
-    }
+        list.sort((a, b) => {
+            if (a.productName === $Data.productInfo.productName && b.productName !== $Data.productInfo.productName) {
+                return -1;
+            }
 
-    if (deviceType === "embedded") {
-        return "嵌入式设备";
-    }
+            if (b.productName === $Data.productInfo.productName && a.productName !== $Data.productInfo.productName) {
+                return 1;
+            }
 
-    return String(deviceType || "Unknown");
-}
+            if (Number(b.totalPv || 0) !== Number(a.totalPv || 0)) {
+                return Number(b.totalPv || 0) - Number(a.totalPv || 0);
+            }
 
-function formatReportDate(reportDate) {
-    const text = String(reportDate || "");
+            return String(a.productName || "").localeCompare(String(b.productName || ""), "zh-CN");
+        });
 
-    if (text.length !== 8) {
-        return text;
-    }
+        return [fallbackProduct, ...list];
+    }),
+    selectedProduct: computed(() => {
+        const list = $Computed.productOptions;
 
-    return `${text.slice(4, 6)}-${text.slice(6, 8)}`;
-}
-
-const fetchData = async () => {
-    try {
-        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(permissionStats, overviewRes.data);
-        realtimeStats.onlineCount = Number(onlineStatsRes.data?.onlineCount || 0);
-        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 : [];
-        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")
-                }
-            ];
+        if (list.length === 0) {
+            return null;
         }
-        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 : [];
-        uaStats.osList = Array.isArray(infoStatsRes.data?.today?.osList) ? infoStatsRes.data.today.osList : [];
-        uaStats.osVersions = Array.isArray(infoStatsRes.data?.today?.osVersions) ? infoStatsRes.data.today.osVersions : [];
-        uaStats.deviceVendors = Array.isArray(infoStatsRes.data?.today?.deviceVendors) ? infoStatsRes.data.today.deviceVendors : [];
-        uaStats.deviceModels = Array.isArray(infoStatsRes.data?.today?.deviceModels) ? infoStatsRes.data.today.deviceModels : [];
-        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 : [];
-        ensureSelectedProduct();
-    } catch (_error) {
-        // 静默失败：不阻断页面展示
-    }
-};
 
-fetchData();
+        const matched = list.find((item) => item.key === $Data.productState.selectedKey);
+        return matched || list[0];
+    }),
+    selectedDaysTrend: computed(() => $Method.sortTrendList($Computed.selectedProduct?.days || [], "reportDate")),
+    selectedDaysFilled: computed(() => $Method.buildFilledTrendDays($Computed.selectedProduct?.days || [], 30)),
+    selectedDaysHasData: computed(() => $Computed.selectedDaysTrend.length > 0),
+    selectedDaysTrendPreview: computed(() => $Method.buildTrendPreview($Computed.selectedDaysFilled, 10)),
+    selectedDaysBars: computed(() => $Method.buildTrendBars($Computed.selectedDaysFilled, $Method.getTrendMax($Computed.selectedDaysFilled))),
+    productPeriodCards: computed(() => {
+        const list = $Computed.selectedDaysFilled;
+        const today = list[list.length - 1] || { pv: 0, uv: 0 };
+        const yesterday = list[list.length - 2] || { pv: 0, uv: 0 };
+        const dayBeforeYesterday = list[list.length - 3] || { pv: 0, uv: 0 };
+        const recent7 = $Method.sumTrendRange(list.slice(-7));
+        const recent30 = $Method.sumTrendRange(list);
+
+        return [
+            { key: "today", label: "今日", pv: today.pv, uv: today.uv },
+            { key: "yesterday", label: "昨日", pv: yesterday.pv, uv: yesterday.uv },
+            { key: "dayBeforeYesterday", label: "前日", pv: dayBeforeYesterday.pv, uv: dayBeforeYesterday.uv },
+            { key: "recent7", label: "最近7天", pv: recent7.pv, uv: recent7.uv },
+            { key: "recent30", label: "最近30天", pv: recent30.pv, uv: recent30.uv }
+        ];
+    })
+});
+
+$Method.fetchData();
 </script>
 
 <style scoped lang="scss">