befly-admin-ui 1.8.26 → 1.8.32

package/views/log/visit/index.vue

@@ -0,0 +1,700 @@
+<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>