befly-admin-ui 1.8.32 → 1.8.33

package/jsconfig.json

@@ -2,7 +2,6 @@
     "extends": "../../jsconfig.base.json",
     "compilerOptions": {
         "target": "ES2022",
-        "types": ["bun"],
         "strict": false,
         "exactOptionalPropertyTypes": false,
         "noImplicitReturns": false,

package/package.json

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

package/views/index/components/systemOverview.vue

@@ -84,17 +84,20 @@
                         </div>
                     </div>
 
-                    <div v-if="selectedDaysTrend.length > 0" class="trend-content">
-                        <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="trend-svg">
-                            <polyline class="trend-line trend-line-pv" :points="selectedDaysPvPoints" />
-                            <polyline class="trend-line trend-line-uv" :points="selectedDaysUvPoints" />
-                            <circle v-for="item in selectedDaysPvDots" :key="`day-pv-${item.bucketDate}`" class="trend-dot trend-dot-pv" :cx="item.x" :cy="item.y" r="1.2" />
-                            <circle v-for="item in selectedDaysUvDots" :key="`day-uv-${item.bucketDate}`" class="trend-dot trend-dot-uv" :cx="item.x" :cy="item.y" r="1.2" />
-                        </svg>
+                    <div v-if="selectedDaysHasData" class="trend-content">
+                        <div class="trend-bars">
+                            <div v-for="item in 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>
+                                <div class="trend-bar-label">{{ formatReportDate(item.reportDate) }}</div>
+                            </div>
+                        </div>
 
                         <div class="trend-briefs trend-briefs-wide">
-                            <div v-for="item in selectedDaysTrendPreview" :key="item.bucketDate" class="trend-brief-item">
-                                <div class="trend-date">{{ formatBucketDate(item.bucketDate) }}</div>
+                            <div v-for="item in selectedDaysTrendPreview" :key="item.reportDate" class="trend-brief-item">
+                                <div class="trend-date">{{ formatReportDate(item.reportDate) }}</div>
                                 <div class="trend-values">
                                     <span class="trend-value pv">{{ item.pv }}</span>
                                     <span class="trend-value uv">{{ item.uv }}</span>
@@ -291,14 +294,11 @@ const selectedProductTotalUv = computed(() => {
     return sumTrendField(selectedProduct.value?.days || [], "uv");
 });
 
-const selectedDaysTrend = computed(() => sortTrendList(selectedProduct.value?.days || [], "bucketDate"));
-const selectedDaysTrendMax = computed(() => getTrendMax(selectedDaysTrend.value));
-const selectedDaysTrendPreview = computed(() => buildTrendPreview(selectedDaysTrend.value, 10));
-const selectedDaysPvPoints = computed(() => buildTrendPoints(selectedDaysTrend.value, "pv", selectedDaysTrendMax.value));
-const selectedDaysUvPoints = computed(() => buildTrendPoints(selectedDaysTrend.value, "uv", selectedDaysTrendMax.value));
-const selectedDaysPvDots = computed(() => buildTrendDots(selectedDaysTrend.value, "pv", selectedDaysTrendMax.value));
-const selectedDaysUvDots = computed(() => buildTrendDots(selectedDaysTrend.value, "uv", selectedDaysTrendMax.value));
+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 };
@@ -317,7 +317,7 @@ const productPeriodCards = computed(() => {
 });
 
 function buildFallbackProduct() {
-    const days = sortTrendList(realtimeStats.days, "bucketDate");
+    const days = sortTrendList(realtimeStats.days, "reportDate");
 
     return {
         key: "all-products",
@@ -334,7 +334,7 @@ function buildFallbackProduct() {
     };
 }
 
-function getBucketDate(timestamp) {
+function getReportDateNumber(timestamp) {
     return Number(
         new Intl.DateTimeFormat("en-CA", {
             year: "numeric",
@@ -346,32 +346,32 @@ function getBucketDate(timestamp) {
     );
 }
 
-function buildRecentDateList(limit) {
+function buildRecentReportDateList(limit) {
     const list = [];
 
     for (let i = limit - 1; i >= 0; i--) {
-        list.push(getBucketDate(Date.now() - i * 24 * 60 * 60 * 1000));
+        list.push(getReportDateNumber(Date.now() - i * 24 * 60 * 60 * 1000));
     }
 
     return list;
 }
 
 function buildFilledTrendDays(list, limit) {
-    const dateList = buildRecentDateList(limit);
+    const dateList = buildRecentReportDateList(limit);
     const dataMap = new Map();
 
     for (const item of list) {
-        dataMap.set(Number(item?.bucketDate || 0), {
-            bucketDate: Number(item?.bucketDate || 0),
+        dataMap.set(Number(item?.reportDate || 0), {
+            reportDate: Number(item?.reportDate || 0),
             pv: Number(item?.pv || 0),
             uv: Number(item?.uv || 0)
         });
     }
 
-    return dateList.map((bucketDate) => {
+    return dateList.map((reportDate) => {
         return (
-            dataMap.get(bucketDate) || {
-                bucketDate: bucketDate,
+            dataMap.get(reportDate) || {
+                reportDate: reportDate,
                 pv: 0,
                 uv: 0
             }
@@ -437,49 +437,41 @@ function buildTrendPreview(list, maxCount) {
     }
 
     const preview = [];
-    const lastIndex = list.length - 1;
-    const step = Math.ceil(lastIndex / (maxCount - 1));
+    const usedIndex = new Set();
 
-    for (let i = 0; i <= lastIndex; i += step) {
-        preview.push(list[i]);
-    }
+    for (let i = 0; i < maxCount; i++) {
+        const index = Math.round((i * (list.length - 1)) / (maxCount - 1));
+
+        if (usedIndex.has(index)) {
+            continue;
+        }
 
-    if (preview[preview.length - 1] !== list[lastIndex]) {
-        preview.push(list[lastIndex]);
+        usedIndex.add(index);
+        preview.push(list[index]);
     }
 
-    return preview.slice(0, maxCount);
+    return preview;
 }
 
-function buildTrendDots(list, field, maxValue) {
-    if (list.length === 0) {
-        return [];
-    }
-
+function buildTrendBars(list, maxValue) {
     const result = [];
 
-    for (let i = 0; i < list.length; i++) {
-        const item = list[i];
-        const value = Number(item?.[field] || 0);
-        const x = list.length === 1 ? 50 : (i * 100) / (list.length - 1);
-        const y = 54 - (value / maxValue) * 42;
+    for (const item of list) {
+        const pv = Number(item?.pv || 0);
+        const uv = Number(item?.uv || 0);
 
         result.push({
-            bucketDate: item.bucketDate,
-            x: Number(x.toFixed(2)),
-            y: Number(y.toFixed(2))
+            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%"
         });
     }
 
     return result;
 }
 
-function buildTrendPoints(list, field, maxValue) {
-    return buildTrendDots(list, field, maxValue)
-        .map((item) => `${item.x},${item.y}`)
-        .join(" ");
-}
-
 function getTrendMax(list) {
     let max = 0;
 
@@ -527,8 +519,8 @@ function formatDeviceType(deviceType) {
     return String(deviceType || "Unknown");
 }
 
-function formatBucketDate(bucketDate) {
-    const text = String(bucketDate || "");
+function formatReportDate(reportDate) {
+    const text = String(reportDate || "");
 
     if (text.length !== 8) {
         return text;
@@ -539,23 +531,23 @@ function formatBucketDate(bucketDate) {
 
 const fetchData = async () => {
     try {
-        const [overviewRes, visitStatsRes, errorStatsRes] = await Promise.all([$Http("/core/dashboard/systemOverview", {}, [""]), $Http("/core/tongJi/visitStats", {}, [""]), $Http("/core/tongJi/errorStats", {}, [""])]);
+        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(visitStatsRes.data?.onlineCount || 0);
-        realtimeStats.todayPv = Number(visitStatsRes.data?.today?.pv || 0);
-        realtimeStats.todayUv = Number(visitStatsRes.data?.today?.uv || 0);
-        realtimeStats.days = Array.isArray(visitStatsRes.data?.days) ? visitStatsRes.data.days : [];
-        productState.options = Array.isArray(visitStatsRes.data?.products) ? visitStatsRes.data.products : [];
-        uaStats.deviceTypes = Array.isArray(visitStatsRes.data?.uaStats?.deviceTypes) ? visitStatsRes.data.uaStats.deviceTypes : [];
-        uaStats.browsers = Array.isArray(visitStatsRes.data?.uaStats?.browsers) ? visitStatsRes.data.uaStats.browsers : [];
-        uaStats.browserVersions = Array.isArray(visitStatsRes.data?.uaStats?.browserVersions) ? visitStatsRes.data.uaStats.browserVersions : [];
-        uaStats.osList = Array.isArray(visitStatsRes.data?.uaStats?.osList) ? visitStatsRes.data.uaStats.osList : [];
-        uaStats.osVersions = Array.isArray(visitStatsRes.data?.uaStats?.osVersions) ? visitStatsRes.data.uaStats.osVersions : [];
-        uaStats.deviceVendors = Array.isArray(visitStatsRes.data?.uaStats?.deviceVendors) ? visitStatsRes.data.uaStats.deviceVendors : [];
-        uaStats.deviceModels = Array.isArray(visitStatsRes.data?.uaStats?.deviceModels) ? visitStatsRes.data.uaStats.deviceModels : [];
-        uaStats.engines = Array.isArray(visitStatsRes.data?.uaStats?.engines) ? visitStatsRes.data.uaStats.engines : [];
-        uaStats.cpuArchitectures = Array.isArray(visitStatsRes.data?.uaStats?.cpuArchitectures) ? visitStatsRes.data.uaStats.cpuArchitectures : [];
+        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 : [];
+        productState.options = [];
+        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 : [];
         productInfo.productName = String($Config.productName || "-");
         productInfo.productCode = String($Config.productCode || "-");
@@ -865,10 +857,13 @@ fetchData();
     background: #2ba471;
 }
 
-.trend-svg {
-    width: 100%;
+.trend-bars {
+    display: grid;
+    grid-template-columns: repeat(30, minmax(0, 1fr));
+    align-items: end;
+    gap: 0;
     height: 148px;
-    display: block;
+    padding: 10px 0 6px;
     border-radius: 8px;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.025), rgba(var(--primary-color-rgb), 0.06));
     background-size:
@@ -877,23 +872,52 @@ fetchData();
         auto;
 }
 
-.trend-line {
-    fill: none;
-    stroke-width: 1.8;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+.trend-bar-group {
+    min-width: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    gap: 4px;
+    padding: 0 2px;
+}
+
+.trend-bar-stack {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 2px;
+    min-height: 0;
+}
+
+.trend-bar {
+    width: calc(50% - 1px);
+    min-width: 2px;
+    border-radius: 4px 4px 0 0;
+    transition: all 0.2s ease;
+
+    &:hover {
+        opacity: 0.9;
+        transform: translateY(-1px);
+    }
 }
 
-.trend-line-pv,
-.trend-dot-pv {
-    stroke: #0052d9;
-    fill: #0052d9;
+.trend-bar-pv {
+    background: linear-gradient(180deg, rgba(0, 82, 217, 0.65), #0052d9);
 }
 
-.trend-line-uv,
-.trend-dot-uv {
-    stroke: #2ba471;
-    fill: #2ba471;
+.trend-bar-uv {
+    background: linear-gradient(180deg, rgba(43, 164, 113, 0.65), #2ba471);
+}
+
+.trend-bar-label {
+    font-size: 10px;
+    line-height: 1;
+    color: var(--text-tertiary);
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    transform: scale(0.92);
 }
 
 .trend-briefs {
@@ -1040,6 +1064,16 @@ fetchData();
         grid-template-columns: repeat(6, minmax(0, 1fr));
     }
 
+    .trend-bars {
+        grid-template-columns: repeat(15, minmax(0, 1fr));
+        row-gap: 6px;
+        height: auto;
+    }
+
+    .trend-bar-group:nth-child(n + 16) {
+        display: none;
+    }
+
     .ua-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -1073,6 +1107,14 @@ fetchData();
     .trend-briefs-wide {
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }
+
+    .trend-bars {
+        grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+
+    .trend-bar-group:nth-child(n + 11) {
+        display: none;
+    }
 }
 
 @media (max-width: 640px) {
@@ -1090,8 +1132,13 @@ fetchData();
         width: 100%;
     }
 
-    .trend-svg {
+    .trend-bars {
+        grid-template-columns: repeat(7, minmax(0, 1fr));
         height: 126px;
     }
+
+    .trend-bar-group:nth-child(n + 8) {
+        display: none;
+    }
 }
 </style>

package/views/log/error/index.vue

@@ -268,8 +268,18 @@ function formatDeviceType(deviceType) {
 }
 
 function formatTime(timestamp) {
-    if (!timestamp) return "-";
-    const date = new Date(timestamp);
+    const value = Number(timestamp || 0);
+
+    if (!value) {
+        return "-";
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+        return "-";
+    }
+
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, "0");
     const day = String(date.getDate()).padStart(2, "0");

package/views/log/visit/index.vue

@@ -1,700 +0,0 @@
-<template>
-    <div class="page-visit-stats">
-        <div class="page-header">
-            <div>
-                <div class="page-title">访问统计</div>
-                <div class="page-desc">查看访问趋势、在线人数与 UA 设备明细分布</div>
-            </div>
-            <TButton theme="primary" @click="fetchData">刷新统计</TButton>
-        </div>
-
-        <div class="summary-grid">
-            <div class="summary-card">
-                <div class="summary-label">产品名称</div>
-                <div class="summary-value primary">{{ $Config.productName }}</div>
-            </div>
-            <div class="summary-card">
-                <div class="summary-label">产品代号</div>
-                <div class="summary-value info">{{ $Config.productCode }}</div>
-            </div>
-            <div class="summary-card">
-                <div class="summary-label">产品版本</div>
-                <div class="summary-value success">{{ $Config.productVersion }}</div>
-            </div>
-            <div class="summary-card">
-                <div class="summary-label">当前在线</div>
-                <div class="summary-value primary">{{ $Data.onlineCount }}</div>
-            </div>
-            <div class="summary-card">
-                <div class="summary-label">今日访问</div>
-                <div class="summary-value info">{{ $Data.todayPv }}</div>
-            </div>
-            <div class="summary-card">
-                <div class="summary-label">今日人数</div>
-                <div class="summary-value success">{{ $Data.todayUv }}</div>
-            </div>
-            <div class="summary-card">
-                <div class="summary-label">主设备类型</div>
-                <div class="summary-value warning">{{ getTopUaLabel($Data.uaStats.deviceTypes, formatDeviceType) }}</div>
-            </div>
-            <div class="summary-card">
-                <div class="summary-label">主浏览器</div>
-                <div class="summary-value primary">{{ getTopUaLabel($Data.uaStats.browsers) }}</div>
-            </div>
-            <div class="summary-card">
-                <div class="summary-label">主系统</div>
-                <div class="summary-value danger">{{ getTopUaLabel($Data.uaStats.osList) }}</div>
-            </div>
-        </div>
-
-        <div class="trend-grid">
-            <div class="trend-card">
-                <div class="card-title">今日 30 分钟访问趋势</div>
-                <div v-if="todayTrend.length > 0" class="trend-chart-wrap">
-                    <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="trend-svg">
-                        <polyline class="trend-line trend-line-pv" :points="todayPvPoints" />
-                        <polyline class="trend-line trend-line-uv" :points="todayUvPoints" />
-                        <circle v-for="item in todayPvDots" :key="`pv-${item.bucketTime}`" class="trend-dot trend-dot-pv" :cx="item.x" :cy="item.y" r="1.2" />
-                        <circle v-for="item in todayUvDots" :key="`uv-${item.bucketTime}`" class="trend-dot trend-dot-uv" :cx="item.x" :cy="item.y" r="1.2" />
-                    </svg>
-                    <div class="trend-mini-list">
-                        <div v-for="item in todayTrendPreview" :key="`preview-${item.bucketTime}`" class="trend-mini-item">
-                            <div class="trend-mini-time">{{ formatBucketTime(item.bucketTime) }}</div>
-                            <div class="trend-mini-values">
-                                <span class="pv">PV {{ item.pv }}</span>
-                                <span class="uv">UV {{ item.uv }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div v-else class="empty-block">暂无今日趋势数据</div>
-            </div>
-
-            <div class="trend-card">
-                <div class="card-title">近 7 天访问趋势</div>
-                <div v-if="trendDays.length > 0" class="trend-chart-wrap">
-                    <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="trend-svg">
-                        <polyline class="trend-line trend-line-pv" :points="pvPoints" />
-                        <polyline class="trend-line trend-line-uv" :points="uvPoints" />
-                        <circle v-for="item in pvDots" :key="`days-pv-${item.bucketDate}`" class="trend-dot trend-dot-pv" :cx="item.x" :cy="item.y" r="1.2" />
-                        <circle v-for="item in uvDots" :key="`days-uv-${item.bucketDate}`" class="trend-dot trend-dot-uv" :cx="item.x" :cy="item.y" r="1.2" />
-                    </svg>
-                    <div class="trend-mini-list trend-mini-list-days">
-                        <div v-for="item in trendDays" :key="`day-${item.bucketDate}`" class="trend-mini-item">
-                            <div class="trend-mini-time">{{ formatBucketDate(item.bucketDate) }}</div>
-                            <div class="trend-mini-values">
-                                <span class="pv">PV {{ item.pv }}</span>
-                                <span class="uv">UV {{ item.uv }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div v-else class="empty-block">暂无近 7 天趋势数据</div>
-            </div>
-        </div>
-
-        <div class="ua-grid">
-            <div class="ua-card">
-                <div class="card-title">设备类型</div>
-                <div v-if="$Data.uaStats.deviceTypes.length > 0" class="ua-list">
-                    <div v-for="item in $Data.uaStats.deviceTypes" :key="`type-${item.name}`" class="ua-row">
-                        <span>{{ formatDeviceType(item.name) }}</span>
-                        <strong>{{ item.count }}</strong>
-                    </div>
-                </div>
-                <div v-else class="empty-inline">暂无设备类型数据</div>
-            </div>
-
-            <div class="ua-card">
-                <div class="card-title">浏览器</div>
-                <div v-if="$Data.uaStats.browsers.length > 0" class="ua-list">
-                    <div v-for="item in $Data.uaStats.browsers" :key="`browser-${item.name}`" class="ua-row">
-                        <span>{{ item.name }}</span>
-                        <strong>{{ item.count }}</strong>
-                    </div>
-                </div>
-                <div v-else class="empty-inline">暂无浏览器数据</div>
-            </div>
-
-            <div class="ua-card">
-                <div class="card-title">操作系统</div>
-                <div v-if="$Data.uaStats.osList.length > 0" class="ua-list">
-                    <div v-for="item in $Data.uaStats.osList" :key="`os-${item.name}`" class="ua-row">
-                        <span>{{ item.name }}</span>
-                        <strong>{{ item.count }}</strong>
-                    </div>
-                </div>
-                <div v-else class="empty-inline">暂无操作系统数据</div>
-            </div>
-
-            <div class="ua-card">
-                <div class="card-title">浏览器版本</div>
-                <div v-if="$Data.uaStats.browserVersions.length > 0" class="ua-chip-list">
-                    <span v-for="item in $Data.uaStats.browserVersions" :key="`browser-version-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
-                </div>
-                <div v-else class="empty-inline">暂无浏览器版本数据</div>
-            </div>
-
-            <div class="ua-card">
-                <div class="card-title">系统版本</div>
-                <div v-if="$Data.uaStats.osVersions.length > 0" class="ua-chip-list">
-                    <span v-for="item in $Data.uaStats.osVersions" :key="`os-version-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
-                </div>
-                <div v-else class="empty-inline">暂无系统版本数据</div>
-            </div>
-
-            <div class="ua-card">
-                <div class="card-title">设备厂商</div>
-                <div v-if="$Data.uaStats.deviceVendors.length > 0" class="ua-chip-list">
-                    <span v-for="item in $Data.uaStats.deviceVendors" :key="`vendor-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
-                </div>
-                <div v-else class="empty-inline">暂无设备厂商数据</div>
-            </div>
-
-            <div class="ua-card ua-card-wide">
-                <div class="card-title">设备明细</div>
-                <div class="detail-grid">
-                    <div class="detail-block">
-                        <div class="detail-title">设备型号</div>
-                        <div v-if="$Data.uaStats.deviceModels.length > 0" class="ua-chip-list">
-                            <span v-for="item in $Data.uaStats.deviceModels" :key="`model-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
-                        </div>
-                        <div v-else class="empty-inline">暂无设备型号数据</div>
-                    </div>
-
-                    <div class="detail-block">
-                        <div class="detail-title">渲染引擎</div>
-                        <div v-if="$Data.uaStats.engines.length > 0" class="ua-chip-list">
-                            <span v-for="item in $Data.uaStats.engines" :key="`engine-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
-                        </div>
-                        <div v-else class="empty-inline">暂无渲染引擎数据</div>
-                    </div>
-
-                    <div class="detail-block">
-                        <div class="detail-title">CPU 架构</div>
-                        <div v-if="$Data.uaStats.cpuArchitectures.length > 0" class="ua-chip-list">
-                            <span v-for="item in $Data.uaStats.cpuArchitectures" :key="`cpu-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
-                        </div>
-                        <div v-else class="empty-inline">暂无 CPU 架构数据</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { computed, reactive } from "vue";
-import { Button as TButton } from "tdesign-vue-next";
-import { $Http } from "@/plugins/http";
-import { $Config } from "@/plugins/config";
-
-const $Data = reactive({
-    onlineCount: 0,
-    todayPv: 0,
-    todayUv: 0,
-    days: [],
-    trend: [],
-    uaStats: {
-        deviceTypes: [],
-        browsers: [],
-        browserVersions: [],
-        osList: [],
-        osVersions: [],
-        deviceVendors: [],
-        deviceModels: [],
-        engines: [],
-        cpuArchitectures: []
-    }
-});
-
-function getRecentDays(list, dayCount = 7) {
-    const map = new Map();
-    const now = new Date();
-
-    for (const item of Array.isArray(list) ? list : []) {
-        const bucketDate = Number(item.bucketDate || 0);
-        if (!bucketDate) {
-            continue;
-        }
-
-        map.set(bucketDate, {
-            bucketDate: bucketDate,
-            pv: Number(item.pv || 0),
-            uv: Number(item.uv || 0)
-        });
-    }
-
-    const days = [];
-    for (let i = dayCount - 1; i >= 0; i--) {
-        const date = new Date(now);
-        date.setHours(0, 0, 0, 0);
-        date.setDate(date.getDate() - i);
-        const bucketDate = Number(`${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, "0")}${String(date.getDate()).padStart(2, "0")}`);
-
-        days.push(
-            map.get(bucketDate) || {
-                bucketDate: bucketDate,
-                pv: 0,
-                uv: 0
-            }
-        );
-    }
-
-    return days;
-}
-
-const todayTrend = computed(() => {
-    const list = Array.isArray($Data.trend) ? $Data.trend.slice() : [];
-    list.sort((a, b) => Number(a.bucketTime || 0) - Number(b.bucketTime || 0));
-    return list;
-});
-
-const trendDays = computed(() => {
-    return getRecentDays($Data.days);
-});
-
-const todayTrendPreview = computed(() => {
-    const list = todayTrend.value;
-    if (list.length <= 6) {
-        return list;
-    }
-
-    const preview = [];
-    const lastIndex = list.length - 1;
-    const step = Math.ceil(lastIndex / 5);
-
-    for (let i = 0; i <= lastIndex; i += step) {
-        preview.push(list[i]);
-    }
-
-    if (preview[preview.length - 1]?.bucketTime !== list[lastIndex].bucketTime) {
-        preview.push(list[lastIndex]);
-    }
-
-    return preview;
-});
-
-const todayTrendMax = computed(() => getTrendMax(todayTrend.value));
-const trendMax = computed(() => getTrendMax(trendDays.value));
-
-const todayPvPoints = computed(() => buildTrendPoints(todayTrend.value, "pv", "bucketTime", todayTrendMax.value));
-const todayUvPoints = computed(() => buildTrendPoints(todayTrend.value, "uv", "bucketTime", todayTrendMax.value));
-const todayPvDots = computed(() => buildTrendDots(todayTrend.value, "pv", "bucketTime", todayTrendMax.value));
-const todayUvDots = computed(() => buildTrendDots(todayTrend.value, "uv", "bucketTime", todayTrendMax.value));
-const pvPoints = computed(() => buildTrendPoints(trendDays.value, "pv", "bucketDate", trendMax.value));
-const uvPoints = computed(() => buildTrendPoints(trendDays.value, "uv", "bucketDate", trendMax.value));
-const pvDots = computed(() => buildTrendDots(trendDays.value, "pv", "bucketDate", trendMax.value));
-const uvDots = computed(() => buildTrendDots(trendDays.value, "uv", "bucketDate", trendMax.value));
-
-function buildTrendDots(list, field, keyField, maxValue) {
-    if (list.length === 0) {
-        return [];
-    }
-
-    const dots = [];
-    for (let i = 0; i < list.length; i++) {
-        const item = list[i];
-        const value = Number(item[field] || 0);
-        const x = list.length === 1 ? 50 : (i * 100) / (list.length - 1);
-        const y = 54 - (value / maxValue) * 42;
-
-        dots.push({
-            bucketDate: item.bucketDate,
-            bucketTime: item.bucketTime,
-            key: item[keyField],
-            x: Number(x.toFixed(2)),
-            y: Number(y.toFixed(2))
-        });
-    }
-
-    return dots;
-}
-
-function buildTrendPoints(list, field, keyField, maxValue) {
-    const dots = buildTrendDots(list, field, keyField, maxValue);
-    return dots.map((item) => `${item.x},${item.y}`).join(" ");
-}
-
-function getTrendMax(list, fieldA = "pv", fieldB = "uv") {
-    let max = 0;
-
-    for (const item of list) {
-        const valueA = Number(item[fieldA] || 0);
-        const valueB = Number(item[fieldB] || 0);
-
-        if (valueA > max) {
-            max = valueA;
-        }
-
-        if (valueB > max) {
-            max = valueB;
-        }
-    }
-
-    return max > 0 ? max : 1;
-}
-
-function formatBucketDate(bucketDate) {
-    const text = String(bucketDate || "");
-    if (text.length !== 8) {
-        return text;
-    }
-
-    return `${text.slice(4, 6)}-${text.slice(6, 8)}`;
-}
-
-function formatBucketTime(bucketTime) {
-    const date = new Date(Number(bucketTime || 0));
-    if (Number.isNaN(date.getTime())) {
-        return "--:--";
-    }
-
-    return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
-}
-
-function formatDeviceType(deviceType) {
-    if (deviceType === "desktop") {
-        return "桌面端";
-    }
-
-    if (deviceType === "mobile") {
-        return "移动端";
-    }
-
-    if (deviceType === "tablet") {
-        return "平板";
-    }
-
-    if (deviceType === "smarttv") {
-        return "电视";
-    }
-
-    if (deviceType === "wearable") {
-        return "穿戴设备";
-    }
-
-    if (deviceType === "embedded") {
-        return "嵌入式设备";
-    }
-
-    return String(deviceType || "Unknown");
-}
-
-function getTopUaLabel(list, formatter) {
-    const top = Array.isArray(list) && list.length > 0 ? list[0] : null;
-    if (!top) {
-        return "-";
-    }
-
-    if (typeof formatter === "function") {
-        return formatter(top.name);
-    }
-
-    return top.name;
-}
-
-async function fetchData() {
-    try {
-        const result = await $Http("/core/tongJi/visitStats", {}, [""]);
-        $Data.onlineCount = Number(result.data?.onlineCount || 0);
-        $Data.todayPv = Number(result.data?.today?.pv || 0);
-        $Data.todayUv = Number(result.data?.today?.uv || 0);
-        $Data.days = Array.isArray(result.data?.days) ? result.data.days : [];
-        $Data.trend = Array.isArray(result.data?.trend) ? result.data.trend : [];
-        $Data.uaStats.deviceTypes = Array.isArray(result.data?.uaStats?.deviceTypes) ? result.data.uaStats.deviceTypes : [];
-        $Data.uaStats.browsers = Array.isArray(result.data?.uaStats?.browsers) ? result.data.uaStats.browsers : [];
-        $Data.uaStats.browserVersions = Array.isArray(result.data?.uaStats?.browserVersions) ? result.data.uaStats.browserVersions : [];
-        $Data.uaStats.osList = Array.isArray(result.data?.uaStats?.osList) ? result.data.uaStats.osList : [];
-        $Data.uaStats.osVersions = Array.isArray(result.data?.uaStats?.osVersions) ? result.data.uaStats.osVersions : [];
-        $Data.uaStats.deviceVendors = Array.isArray(result.data?.uaStats?.deviceVendors) ? result.data.uaStats.deviceVendors : [];
-        $Data.uaStats.deviceModels = Array.isArray(result.data?.uaStats?.deviceModels) ? result.data.uaStats.deviceModels : [];
-        $Data.uaStats.engines = Array.isArray(result.data?.uaStats?.engines) ? result.data.uaStats.engines : [];
-        $Data.uaStats.cpuArchitectures = Array.isArray(result.data?.uaStats?.cpuArchitectures) ? result.data.uaStats.cpuArchitectures : [];
-    } catch (_error) {
-        // 静默失败
-    }
-}
-
-fetchData();
-</script>
-
-<style scoped lang="scss">
-.page-visit-stats {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.page-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-}
-
-.page-title {
-    font-size: 22px;
-    font-weight: 700;
-    color: var(--text-primary);
-}
-
-.page-desc {
-    margin-top: 4px;
-    font-size: 13px;
-    color: var(--text-secondary);
-}
-
-.summary-grid {
-    display: grid;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-    gap: 12px;
-}
-
-.summary-card,
-.trend-card,
-.ua-card {
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.03), white);
-    padding: 14px;
-}
-
-.summary-label {
-    font-size: 13px;
-    color: var(--text-secondary);
-    margin-bottom: 6px;
-}
-
-.summary-value {
-    font-size: 24px;
-    font-weight: 700;
-    color: var(--text-primary);
-
-    &.primary {
-        color: var(--primary-color);
-    }
-
-    &.info {
-        color: var(--brand-color);
-    }
-
-    &.success {
-        color: var(--success-color);
-    }
-
-    &.warning {
-        color: var(--warning-color);
-    }
-
-    &.danger {
-        color: var(--error-color);
-    }
-}
-
-.trend-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px;
-}
-
-.card-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 10px;
-}
-
-.trend-chart-wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.trend-svg {
-    width: 100%;
-    height: 220px;
-    display: block;
-    border-radius: 8px;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px), linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.02), rgba(var(--primary-color-rgb), 0.05));
-    background-size:
-        100% 25%,
-        14.285% 100%,
-        auto;
-}
-
-.trend-line {
-    fill: none;
-    stroke-width: 1.8;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-}
-
-.trend-line-pv {
-    stroke: #0052d9;
-}
-
-.trend-line-uv {
-    stroke: #2ba471;
-}
-
-.trend-dot-pv {
-    fill: #0052d9;
-}
-
-.trend-dot-uv {
-    fill: #2ba471;
-}
-
-.trend-mini-list {
-    display: grid;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-    gap: 8px;
-}
-
-.trend-mini-list-days {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-}
-
-.trend-mini-item {
-    padding: 8px 6px;
-    border-radius: 6px;
-    background: rgba(255, 255, 255, 0.85);
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    text-align: center;
-}
-
-.trend-mini-time {
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-bottom: 4px;
-}
-
-.trend-mini-values {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.trend-mini-values .pv {
-    color: #0052d9;
-}
-
-.trend-mini-values .uv {
-    color: #2ba471;
-}
-
-.ua-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 12px;
-}
-
-.ua-card-wide {
-    grid-column: span 3;
-}
-
-.ua-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.ua-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 8px 10px;
-    border-radius: 6px;
-    background: rgba(var(--primary-color-rgb), 0.04);
-}
-
-.ua-chip-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.ua-chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 10px;
-    border-radius: 999px;
-    background: rgba(var(--primary-color-rgb), 0.08);
-    color: var(--primary-color);
-    font-size: 12px;
-    font-weight: 600;
-}
-
-.detail-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 12px;
-}
-
-.detail-block {
-    border-radius: 6px;
-    background: rgba(var(--primary-color-rgb), 0.03);
-    padding: 10px;
-}
-
-.detail-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-bottom: 8px;
-}
-
-.empty-block,
-.empty-inline {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 96px;
-    border-radius: 6px;
-    background: rgba(var(--primary-color-rgb), 0.03);
-    color: var(--text-secondary);
-    font-size: 13px;
-}
-
-.empty-inline {
-    min-height: 72px;
-}
-
-@media (max-width: 1200px) {
-    .summary-grid {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-}
-
-@media (max-width: 960px) {
-    .trend-grid,
-    .ua-grid,
-    .detail-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .ua-card-wide {
-        grid-column: span 1;
-    }
-}
-
-@media (max-width: 640px) {
-    .page-header {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .summary-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .trend-mini-list,
-    .trend-mini-list-days {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-}
-</style>