befly-admin-ui 1.8.26 → 1.8.32

package/views/index/components/systemOverview.vue

@@ -1,31 +1,183 @@
-<template>
+<template>
     <div class="section-block">
         <div class="section-header flex items-center gap-2">
             <InfoCircleIcon />
             <h2>系统概览</h2>
         </div>
-        <div class="section-content">
-            <div class="info-block">
-                <div class="stats-grid">
-                    <div class="stat-box stat-primary">
-                        <MenuIcon />
-                        <div class="stat-content">
-                            <div class="stat-value">{{ permissionStats.menuCount }}</div>
-                            <div class="stat-label">菜单总数</div>
+
+        <div class="section-content overview-layout">
+            <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-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-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-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-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-label">今日错误</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="product-stats-card overview-card-large">
+                <div class="card-head">
+                    <div>
+                        <div class="card-title">统计信息</div>
+                    </div>
+
+                    <div class="product-switch-list">
+                        <button v-for="item in productOptions" :key="item.key" type="button" class="product-switch" :class="{ active: item.key === selectedProduct?.key }" @click="selectProduct(item.key)">
+                            <span class="product-switch-name">{{ item.productName }}</span>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="product-metrics-grid">
+                    <div v-for="item in 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>
+                            <strong class="metric-pair-value">{{ item.pv }}</strong>
+                        </div>
+                        <div class="metric-pair-row">
+                            <span class="metric-pair-name">UV</span>
+                            <strong class="metric-pair-value metric-pair-value-uv">{{ item.uv }}</strong>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="trend-grid">
+                <div class="trend-card overview-card-large">
+                    <div class="card-head card-head-compact">
+                        <div class="trend-title">
+                            <TrendingUpIcon />
+                            <span>过去 30 天趋势</span>
+                        </div>
+                        <div class="trend-legend">
+                            <span class="legend-item legend-pv">PV</span>
+                            <span class="legend-item legend-uv">UV</span>
+                        </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 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 class="trend-values">
+                                    <span class="trend-value pv">{{ item.pv }}</span>
+                                    <span class="trend-value uv">{{ item.uv }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-else class="card-empty">暂无近 30 天趋势数据</div>
+                </div>
+            </div>
+
+            <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>
+                            <span class="ua-list-count">{{ item.count }}</span>
+                        </div>
+                    </div>
+                    <div v-else class="ua-empty">暂无设备类型数据</div>
+                </div>
+
+                <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">
+                            <span class="ua-list-name">{{ item.name }}</span>
+                            <span class="ua-list-count">{{ item.count }}</span>
+                        </div>
+                    </div>
+                    <div v-else class="ua-empty">暂无浏览器数据</div>
+                </div>
+
+                <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">
+                            <span class="ua-list-name">{{ item.name }}</span>
+                            <span class="ua-list-count">{{ item.count }}</span>
                         </div>
                     </div>
-                    <div class="stat-box stat-success">
-                        <LinkIcon />
-                        <div class="stat-content">
-                            <div class="stat-value">{{ permissionStats.apiCount }}</div>
-                            <div class="stat-label">接口总数</div>
+                    <div v-else class="ua-empty">暂无系统数据</div>
+                </div>
+
+                <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">
+                            <span class="ua-list-name">{{ item.name }}</span>
+                            <span class="ua-list-count">{{ item.count }}</span>
                         </div>
                     </div>
-                    <div class="stat-box stat-warning">
-                        <UsergroupIcon />
-                        <div class="stat-content">
-                            <div class="stat-value">{{ permissionStats.roleCount }}</div>
-                            <div class="stat-label">角色总数</div>
+                    <div v-else class="ua-empty">暂无厂商数据</div>
+                </div>
+
+                <div class="ua-card ua-card-wide overview-card-large">
+                    <div class="ua-card-title">设备细分</div>
+
+                    <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>
+                            <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>
+                            <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>
+                            <div v-else class="ua-empty ua-empty-inline">暂无 CPU 架构数据</div>
                         </div>
                     </div>
                 </div>
@@ -35,22 +187,380 @@
 </template>
 
 <script setup>
-import { reactive } from "vue";
-import { InfoCircleIcon, LinkIcon, MenuIcon, UsergroupIcon } from "tdesign-icons-vue-next";
+import { computed, reactive } from "vue";
+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);
+    }
+
+    return total;
+});
+
+const productOptions = computed(() => {
+    const list = Array.isArray(productState.options) ? productState.options.slice() : [];
+
+    if (list.length > 0) {
+        return list;
+    }
+
+    return [buildFallbackProduct()];
+});
+
+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];
+});
+
+const selectedProductToday = computed(() => {
+    return (
+        selectedProduct.value?.today || {
+            pv: 0,
+            uv: 0
+        }
+    );
+});
+
+const selectedProductTotalPv = computed(() => {
+    if (selectedProduct.value?.totalPv !== undefined) {
+        return Number(selectedProduct.value.totalPv || 0);
+    }
+
+    return sumTrendField(selectedProduct.value?.days || [], "pv");
+});
+
+const selectedProductTotalUv = computed(() => {
+    if (selectedProduct.value?.totalUv !== undefined) {
+        return Number(selectedProduct.value.totalUv || 0);
+    }
+
+    return sumTrendField(selectedProduct.value?.days || [], "uv");
+});
+
+const selectedDaysTrend = computed(() => sortTrendList(selectedProduct.value?.days || [], "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 selectedDaysFilled = computed(() => buildFilledTrendDays(selectedProduct.value?.days || [], 30));
+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 }
+    ];
+});
+
+function buildFallbackProduct() {
+    const days = sortTrendList(realtimeStats.days, "bucketDate");
+
+    return {
+        key: "all-products",
+        productName: productInfo.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 getBucketDate(timestamp) {
+    return Number(
+        new Intl.DateTimeFormat("en-CA", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit"
+        })
+            .format(timestamp)
+            .replace(/[^0-9]/g, "")
+    );
+}
+
+function buildRecentDateList(limit) {
+    const list = [];
+
+    for (let i = limit - 1; i >= 0; i--) {
+        list.push(getBucketDate(Date.now() - i * 24 * 60 * 60 * 1000));
+    }
+
+    return list;
+}
+
+function buildFilledTrendDays(list, limit) {
+    const dateList = buildRecentDateList(limit);
+    const dataMap = new Map();
+
+    for (const item of list) {
+        dataMap.set(Number(item?.bucketDate || 0), {
+            bucketDate: Number(item?.bucketDate || 0),
+            pv: Number(item?.pv || 0),
+            uv: Number(item?.uv || 0)
+        });
+    }
+
+    return dateList.map((bucketDate) => {
+        return (
+            dataMap.get(bucketDate) || {
+                bucketDate: bucketDate,
+                pv: 0,
+                uv: 0
+            }
+        );
+    });
+}
+
+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.productCode === productInfo.productCode && item.productVersion === productInfo.productVersion);
+    productState.selectedKey = currentProduct?.key || list[0].key;
+}
+
+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() : [];
+
+    result.sort((a, b) => Number(a?.[keyField] || 0) - Number(b?.[keyField] || 0));
+    return result;
+}
+
+function buildTrendPreview(list, maxCount) {
+    if (list.length <= maxCount) {
+        return list;
+    }
+
+    const preview = [];
+    const lastIndex = list.length - 1;
+    const step = Math.ceil(lastIndex / (maxCount - 1));
+
+    for (let i = 0; i <= lastIndex; i += step) {
+        preview.push(list[i]);
+    }
+
+    if (preview[preview.length - 1] !== list[lastIndex]) {
+        preview.push(list[lastIndex]);
+    }
+
+    return preview.slice(0, maxCount);
+}
+
+function buildTrendDots(list, field, maxValue) {
+    if (list.length === 0) {
+        return [];
+    }
+
+    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;
+
+        result.push({
+            bucketDate: item.bucketDate,
+            x: Number(x.toFixed(2)),
+            y: Number(y.toFixed(2))
+        });
+    }
+
+    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;
+
+    for (const item of list) {
+        const pv = Number(item?.pv || 0);
+        const uv = Number(item?.uv || 0);
+
+        if (pv > max) {
+            max = pv;
+        }
+
+        if (uv > max) {
+            max = uv;
+        }
+    }
+
+    return max > 0 ? max : 1;
+}
+
+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 formatBucketDate(bucketDate) {
+    const text = String(bucketDate || "");
+
+    if (text.length !== 8) {
+        return text;
+    }
+
+    return `${text.slice(4, 6)}-${text.slice(6, 8)}`;
+}
+
 const fetchData = async () => {
     try {
-        const res = await $Http("/core/dashboard/systemOverview", {}, [""]);
-        Object.assign(permissionStats, res.data);
+        const [overviewRes, visitStatsRes, errorStatsRes] = await Promise.all([$Http("/core/dashboard/systemOverview", {}, [""]), $Http("/core/tongJi/visitStats", {}, [""]), $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 : [];
+        errorStats.trend = Array.isArray(errorStatsRes.data?.trend) ? errorStatsRes.data.trend : [];
+        productInfo.productName = String($Config.productName || "-");
+        productInfo.productCode = String($Config.productCode || "-");
+        productInfo.productVersion = String($Config.productVersion || "-");
+        ensureSelectedProduct();
     } catch (_error) {
         // 静默失败：不阻断页面展示
     }
@@ -60,129 +570,528 @@ fetchData();
 </script>
 
 <style scoped lang="scss">
-.info-block {
-    background: transparent;
-    border: none;
-    padding: 0;
-    height: 100%;
-
-    .info-header {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding-bottom: 8px;
-        margin-bottom: 12px;
-        border-bottom: 2px solid var(--primary-color);
-
-        .info-title {
-            font-size: 14px;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
+.overview-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.overview-card-large,
+.overview-card-small {
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 10px;
+    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.018), rgba(255, 255, 255, 0.96));
+    box-shadow: 0 4px 14px rgba(31, 35, 41, 0.04);
+    min-width: 0;
+}
+
+.overview-card-large {
+    min-height: 252px;
+    padding: 12px;
+}
+
+.overview-card-small {
+    min-height: 94px;
+    padding: 10px 12px;
+}
+
+.summary-grid {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 8px;
+}
+
+.summary-card {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    transition: all 0.2s ease;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(31, 35, 41, 0.08);
     }
+}
 
-    .info-grid-compact {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 10px;
-
-        .info-grid-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 12px;
-            background: rgba(var(--primary-color-rgb), 0.02);
-            border-radius: var(--border-radius-small);
-            border: 1px solid var(--border-color);
-            transition: all 0.2s ease;
-
-            &:hover {
-                background: rgba(var(--primary-color-rgb), 0.05);
-                border-color: var(--primary-color);
-            }
+.summary-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+    width: 100%;
+    min-width: 0;
+}
 
-            .label {
-                font-size: 14px;
-                color: var(--text-secondary);
-                font-weight: 500;
-            }
+.summary-value,
+.metric-value,
+.metric-period-label,
+.metric-pair-value {
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 1.1;
+    color: var(--text-primary);
+}
 
-            .value {
-                font-size: 14px;
-                color: var(--text-primary);
-                font-weight: 600;
+.summary-value {
+    letter-spacing: -0.3px;
+    font-variant-numeric: tabular-nums;
+}
 
-                &.highlight {
-                    color: var(--primary-color);
-                }
-            }
-        }
+.summary-label,
+.metric-label,
+.trend-date,
+.legend-item,
+.ua-list-name,
+.ua-empty,
+.ua-chip,
+.ua-meta-title,
+.metric-pair-name {
+    font-size: 12px;
+}
+
+.summary-label,
+.metric-label,
+.legend-item,
+.trend-date,
+.ua-list-name,
+.ua-empty,
+.ua-meta-title,
+.metric-pair-name {
+    color: var(--text-secondary);
+}
+
+.stat-primary {
+    .summary-value {
+        color: var(--primary-color);
+    }
+}
+
+.stat-success {
+    .summary-value {
+        color: var(--success-color);
+    }
+}
+
+.stat-warning {
+    .summary-value {
+        color: var(--warning-color);
+    }
+}
+
+.stat-danger {
+    .summary-value {
+        color: var(--error-color);
+    }
+}
+
+.stat-critical {
+    .summary-value {
+        color: #d54941;
+    }
+}
+
+.product-stats-card {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.card-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.card-head-compact {
+    align-items: center;
+}
+
+.card-title,
+.trend-title,
+.ua-card-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.product-switch-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 8px;
+}
+
+.product-switch {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    min-height: 36px;
+    padding: 0 12px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.88);
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        border-color: rgba(var(--primary-color-rgb), 0.3);
+        background: rgba(var(--primary-color-rgb), 0.05);
+    }
+
+    &.active {
+        border-color: rgba(var(--primary-color-rgb), 0.45);
+        background: rgba(var(--primary-color-rgb), 0.08);
+        box-shadow: inset 0 0 0 1px rgba(var(--primary-color-rgb), 0.08);
     }
 }
 
-.stats-grid {
+.product-switch-name {
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+}
+
+.product-metrics-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(5, minmax(0, 1fr));
     gap: 10px;
+}
 
-    .stat-box {
-        background: rgba(var(--primary-color-rgb), 0.02);
-        border: 1px solid var(--border-color);
-        border-radius: 6px;
-        padding: 12px;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        transition: all 0.3s;
-
-        &:hover {
-            background: rgba(var(--primary-color-rgb), 0.05);
-            border-color: var(--primary-color);
-            transform: translateY(-2px);
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-        }
+.metric-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 10px;
+    min-height: 128px;
+    padding: 14px 14px 12px;
+    border-radius: 10px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(var(--primary-color-rgb), 0.045));
+    border: 1px solid rgba(var(--primary-color-rgb), 0.08);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
 
-        .stat-content {
-            flex: 1;
+.metric-box-period {
+    gap: 12px;
 
-            .stat-value {
-                font-size: 20px;
-                font-weight: 700;
-                margin-bottom: 2px;
-            }
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 24px rgba(31, 35, 41, 0.08);
+    }
+}
 
-            .stat-label {
-                font-size: 14px;
-                color: var(--text-secondary);
-            }
-        }
+.metric-period-label {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-secondary);
+    letter-spacing: 0.3px;
+}
 
-        &.stat-primary {
-            border-color: var(--primary-color);
-            background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05), white);
+.metric-pair-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding-top: 6px;
+    border-top: 1px dashed rgba(0, 0, 0, 0.06);
+}
 
-            .stat-value {
-                color: var(--primary-color);
-            }
-        }
+.metric-pair-value {
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: -0.3px;
+    font-variant-numeric: tabular-nums;
+    color: #0052d9;
+}
 
-        &.stat-success {
-            border-color: var(--success-color);
-            background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.05), white);
+.metric-pair-value-uv {
+    color: #2ba471;
+}
 
-            .stat-value {
-                color: var(--success-color);
-            }
-        }
+.trend-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 10px;
+}
 
-        &.stat-warning {
-            border-color: var(--warning-color);
-            background: linear-gradient(135deg, rgba(var(--warning-color-rgb), 0.05), white);
+.trend-card {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
 
-            .stat-value {
-                color: var(--warning-color);
-            }
-        }
+.trend-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+}
+
+.trend-legend {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+
+    &::before {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 999px;
+        display: inline-block;
+    }
+}
+
+.legend-pv::before {
+    background: #0052d9;
+}
+
+.legend-uv::before {
+    background: #2ba471;
+}
+
+.trend-svg {
+    width: 100%;
+    height: 148px;
+    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.025), rgba(var(--primary-color-rgb), 0.06));
+    background-size:
+        100% 25%,
+        3.333% 100%,
+        auto;
+}
+
+.trend-line {
+    fill: none;
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.trend-line-pv,
+.trend-dot-pv {
+    stroke: #0052d9;
+    fill: #0052d9;
+}
+
+.trend-line-uv,
+.trend-dot-uv {
+    stroke: #2ba471;
+    fill: #2ba471;
+}
+
+.trend-briefs {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    gap: 6px;
+}
+
+.trend-briefs-wide {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.trend-brief-item {
+    min-width: 0;
+    padding: 6px 4px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.86);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    text-align: center;
+}
+
+.trend-values {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.15;
+    font-variant-numeric: tabular-nums;
+}
+
+.trend-value.pv {
+    color: #0052d9;
+}
+
+.trend-value.uv {
+    color: #2ba471;
+}
+
+.card-empty,
+.ua-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 80px;
+    border-radius: 8px;
+    background: rgba(var(--primary-color-rgb), 0.03);
+}
+
+.ua-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px;
+}
+
+.ua-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.ua-card-wide {
+    grid-column: span 4;
+}
+
+.ua-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1;
+}
+
+.ua-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 7px 9px;
+    border-radius: 6px;
+    background: rgba(var(--primary-color-rgb), 0.04);
+}
+
+.ua-list-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ua-list-count {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.1;
+    font-variant-numeric: tabular-nums;
+    color: var(--primary-color);
+}
+
+.ua-meta-group {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+    flex: 1;
+}
+
+.ua-meta-block {
+    border-radius: 8px;
+    background: rgba(var(--primary-color-rgb), 0.03);
+    padding: 10px;
+}
+
+.ua-chip-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.ua-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 8px;
+    border-radius: 999px;
+    background: rgba(var(--primary-color-rgb), 0.08);
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+.ua-empty-inline {
+    min-height: auto;
+    justify-content: flex-start;
+    background: transparent;
+    padding: 0;
+}
+
+@media (max-width: 1280px) {
+    .summary-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .product-metrics-grid {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .trend-briefs-wide {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .ua-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .ua-card-wide {
+        grid-column: span 2;
+    }
+}
+
+@media (max-width: 960px) {
+    .summary-grid,
+    .ua-grid,
+    .ua-meta-group {
+        grid-template-columns: 1fr;
+    }
+
+    .ua-card-wide {
+        grid-column: span 1;
+    }
+
+    .card-head,
+    .card-head-compact {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .product-switch-list {
+        justify-content: flex-start;
+    }
+
+    .trend-briefs-wide {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 640px) {
+    .summary-grid,
+    .product-metrics-grid,
+    .trend-briefs-wide {
+        grid-template-columns: 1fr;
+    }
+
+    .overview-card-large {
+        min-height: 0;
+    }
+
+    .product-switch {
+        width: 100%;
+    }
+
+    .trend-svg {
+        height: 126px;
     }
 }
 </style>