befly-admin-ui 1.10.18 → 1.11.0

package/views/index/components/systemOverview.vue

@@ -5,196 +5,59 @@
             <h2>系统概览</h2>
         </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">{{ $Data.permissionStats.menuCount }}</div>
-                        <div class="summary-label">菜单总数</div>
-                    </div>
-                </div>
-
-                <div class="summary-card overview-card-small stat-success">
-                    <div class="summary-content">
-                        <div class="summary-value">{{ $Data.permissionStats.apiCount }}</div>
-                        <div class="summary-label">接口总数</div>
-                    </div>
-                </div>
-
-                <div class="summary-card overview-card-small stat-warning">
-                    <div class="summary-content">
-                        <div class="summary-value">{{ $Data.permissionStats.roleCount }}</div>
-                        <div class="summary-label">角色总数</div>
-                    </div>
-                </div>
-
-                <div class="summary-card overview-card-small stat-danger">
-                    <div class="summary-content">
-                        <div class="summary-value">{{ $Data.realtimeStats.onlineCount }}</div>
-                        <div class="summary-label">当前在线</div>
-                    </div>
-                </div>
-
-                <div class="summary-card overview-card-small stat-critical">
-                    <div class="summary-content">
-                        <div class="summary-value">{{ $Computed.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-select-wrap">
-                        <TSelect :model-value="$Data.productState.selectedKey" class="product-select" placeholder="请选择产品" @change="$Method.selectProduct">
-                            <TOption v-for="item in $Computed.productOptions" :key="item.key" :value="item.key" :label="item.productName" />
-                        </TSelect>
-                    </div>
-                </div>
-
-                <div class="product-metrics-grid">
-                    <div v-for="item in $Computed.productPeriodCards" :key="item.key" class="metric-box metric-box-period">
-                        <div class="metric-period-label">{{ item.label }}</div>
-                        <div class="metric-pair-row">
-                            <span class="metric-pair-name">PV</span>
-                            <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="$Computed.selectedDaysHasData" class="trend-content">
-                        <div class="trend-bars">
-                            <div v-for="item in $Computed.selectedDaysBars" :key="item.reportDate" class="trend-bar-group">
-                                <div class="trend-bar-stack">
-                                    <div class="trend-bar trend-bar-pv" :style="{ height: item.pvHeight }" :title="`${$Method.formatReportDate(item.reportDate)} PV ${item.pv}`"></div>
-                                    <div class="trend-bar trend-bar-uv" :style="{ height: item.uvHeight }" :title="`${$Method.formatReportDate(item.reportDate)} UV ${item.uv}`"></div>
-                                </div>
-                                <div class="trend-bar-label">{{ $Method.formatReportDate(item.reportDate) }}</div>
-                            </div>
-                        </div>
-
-                        <div class="trend-briefs trend-briefs-wide">
-                            <div v-for="item in $Computed.selectedDaysTrendPreview" :key="item.reportDate" class="trend-brief-item">
-                                <div class="trend-date">{{ $Method.formatReportDate(item.reportDate) }}</div>
-                                <div class="trend-values">
-                                    <span class="trend-value pv">{{ item.pv }}</span>
-                                    <span class="trend-value uv">{{ item.uv }}</span>
-                                </div>
+        <div class="section-content">
+            <t-row :gutter="[16, 16]" class="dashboard-card-row">
+                <t-col :span="2" class="dashboard-card-col">
+                    <div class="dashboard-card">
+                        <div class="dashboard-card-content">
+                            <div class="dashboard-card-label">菜单总数</div>
+                            <div class="dashboard-card-value-row">
+                                <div class="dashboard-card-main dashboard-card-main--metric dashboard-card-main--primary">{{ $Data.permissionStats.menuCount }}</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="$Data.uaStats.deviceTypes.length > 0" class="ua-list">
-                        <div v-for="item in $Data.uaStats.deviceTypes.slice(0, 5)" :key="`device-type-${item.name}`" class="ua-list-item">
-                            <span class="ua-list-name">{{ $Method.formatDeviceType(item.name) }}</span>
-                            <span class="ua-list-count">{{ item.count }}</span>
-                        </div>
-                    </div>
-                    <div v-else class="ua-empty">暂无设备类型数据</div>
-                </div>
-
-                <div class="ua-card overview-card-small">
-                    <div class="ua-card-title">浏览器分布</div>
-                    <div v-if="$Data.uaStats.browsers.length > 0" class="ua-list">
-                        <div v-for="item in $Data.uaStats.browsers.slice(0, 5)" :key="`browser-${item.name}`" class="ua-list-item">
-                            <span class="ua-list-name">{{ item.name }}</span>
-                            <span class="ua-list-count">{{ item.count }}</span>
-                        </div>
-                    </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="$Data.uaStats.osList.length > 0" class="ua-list">
-                        <div v-for="item in $Data.uaStats.osList.slice(0, 5)" :key="`os-${item.name}`" class="ua-list-item">
-                            <span class="ua-list-name">{{ item.name }}</span>
-                            <span class="ua-list-count">{{ item.count }}</span>
-                        </div>
-                    </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="$Data.uaStats.deviceVendors.length > 0" class="ua-list">
-                        <div v-for="item in $Data.uaStats.deviceVendors.slice(0, 5)" :key="`vendor-${item.name}`" class="ua-list-item">
-                            <span class="ua-list-name">{{ item.name }}</span>
-                            <span class="ua-list-count">{{ item.count }}</span>
-                        </div>
-                    </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="$Data.uaStats.deviceModels.length > 0" class="ua-chip-list">
-                                <span v-for="item in $Data.uaStats.deviceModels.slice(0, 6)" :key="`model-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
+                </t-col>
+
+                <t-col :span="2" class="dashboard-card-col">
+                    <div class="dashboard-card">
+                        <div class="dashboard-card-content">
+                            <div class="dashboard-card-label">接口总数</div>
+                            <div class="dashboard-card-value-row">
+                                <div class="dashboard-card-main dashboard-card-main--metric dashboard-card-main--success">{{ $Data.permissionStats.apiCount }}</div>
                             </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="$Data.uaStats.engines.length > 0" class="ua-chip-list">
-                                <span v-for="item in $Data.uaStats.engines.slice(0, 6)" :key="`engine-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
+                    </div>
+                </t-col>
+
+                <t-col :span="2" class="dashboard-card-col">
+                    <div class="dashboard-card">
+                        <div class="dashboard-card-content">
+                            <div class="dashboard-card-label">角色总数</div>
+                            <div class="dashboard-card-value-row">
+                                <div class="dashboard-card-main dashboard-card-main--metric dashboard-card-main--warning">{{ $Data.permissionStats.roleCount }}</div>
                             </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="$Data.uaStats.cpuArchitectures.length > 0" class="ua-chip-list">
-                                <span v-for="item in $Data.uaStats.cpuArchitectures.slice(0, 6)" :key="`cpu-${item.name}`" class="ua-chip">{{ item.name }} · {{ item.count }}</span>
+                    </div>
+                </t-col>
+
+                <t-col :span="2" class="dashboard-card-col">
+                    <div class="dashboard-card">
+                        <div class="dashboard-card-content">
+                            <div class="dashboard-card-label">今日错误</div>
+                            <div class="dashboard-card-value-row">
+                                <div class="dashboard-card-main dashboard-card-main--metric dashboard-card-main--critical">{{ $Computed.errorTodayCount }}</div>
                             </div>
-                            <div v-else class="ua-empty ua-empty-inline">暂无 CPU 架构数据</div>
                         </div>
                     </div>
-                </div>
-            </div>
+                </t-col>
+            </t-row>
         </div>
     </div>
 </template>
 
 <script setup>
-import { InfoCircleIcon, TrendingUpIcon } from "tdesign-icons-vue-next";
-import { Option as TOption, Select as TSelect } from "tdesign-vue-next";
 import { computed, reactive } from "vue";
 
-import { $Config } from "@/plugins/config.js";
 import { $Http } from "@/plugins/http.js";
 
 const $Data = reactive({
@@ -203,398 +66,18 @@ const $Data = reactive({
         apiCount: 0,
         roleCount: 0
     },
-    realtimeStats: {
-        onlineCount: 0,
-        todayPv: 0,
-        todayUv: 0,
-        days: []
-    },
     errorStats: {
         trend: []
-    },
-    productInfo: {
-        productName: String($Config.productName || "-"),
-        productCode: String($Config.productCode || "-"),
-        productVersion: String($Config.productVersion || "-")
-    },
-    productState: {
-        selectedKey: "",
-        options: [],
-        loading: false
-    },
-    uaStats: {
-        deviceTypes: [],
-        browsers: [],
-        browserVersions: [],
-        osList: [],
-        osVersions: [],
-        deviceVendors: [],
-        deviceModels: [],
-        engines: [],
-        cpuArchitectures: []
     }
 });
 
 const $Method = {
-    buildFallbackProduct: function () {
-        const days = $Method.sortTrendList($Data.realtimeStats.days, "reportDate");
-
-        return {
-            key: "all-products",
-            productName: "全部产品",
-            productCode: $Data.productInfo.productCode,
-            productVersion: $Data.productInfo.productVersion,
-            today: {
-                pv: Number($Data.realtimeStats.todayPv || 0),
-                uv: Number($Data.realtimeStats.todayUv || 0)
-            },
-            days: days,
-            totalPv: $Method.sumTrendField(days, "pv"),
-            totalUv: $Method.sumTrendField(days, "uv")
-        };
-    },
-    getReportDateNumber: function (timestamp) {
-        return Number(
-            new Intl.DateTimeFormat("en-CA", {
-                year: "numeric",
-                month: "2-digit",
-                day: "2-digit"
-            })
-                .format(timestamp)
-                .replace(/[^0-9]/g, "")
-        );
-    },
-    buildRecentReportDateList: function (limit) {
-        const list = [];
-
-        for (let i = limit - 1; i >= 0; i--) {
-            list.push($Method.getReportDateNumber(Date.now() - i * 24 * 60 * 60 * 1000));
-        }
-
-        return list;
-    },
-    buildFilledTrendDays: function (list, limit) {
-        const dateList = $Method.buildRecentReportDateList(limit);
-        const dataMap = new Map();
-
-        for (const item of list) {
-            dataMap.set(Number(item?.reportDate || 0), {
-                reportDate: Number(item?.reportDate || 0),
-                pv: Number(item?.pv || 0),
-                uv: Number(item?.uv || 0)
-            });
-        }
-
-        return dateList.map((reportDate) => {
-            return (
-                dataMap.get(reportDate) || {
-                    reportDate: reportDate,
-                    pv: 0,
-                    uv: 0
-                }
-            );
-        });
-    },
-    sumTrendRange: function (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
-        };
-    },
-    ensureSelectedProduct: function () {
-        const list = $Computed.productOptions;
-
-        if (list.length === 0) {
-            $Data.productState.selectedKey = "";
-            return;
-        }
-
-        if (list.some((item) => item.key === $Data.productState.selectedKey)) {
-            return;
-        }
-
-        const currentProduct = list.find((item) => item.productName === $Data.productInfo.productName);
-        $Data.productState.selectedKey = currentProduct?.key || "all-products";
-    },
-    selectProduct: function (productKey) {
-        $Data.productState.selectedKey = String(productKey || "");
-        $Method.fetchProductStats($Data.productState.selectedKey);
-    },
-    getSelectedProductName: function (selectedKey) {
-        if (!selectedKey || selectedKey === "all-products") {
-            return "";
-        }
-
-        const selected = $Data.productState.options.find((item) => item.key === selectedKey);
-
-        if (selected?.productName) {
-            return String(selected.productName);
-        }
-
-        return String(selectedKey);
-    },
-    applyOnlineStatsData: function (onlineStatsData) {
-        $Data.realtimeStats.onlineCount = Number(onlineStatsData?.onlineCount || 0);
-        $Data.realtimeStats.todayPv = Number(onlineStatsData?.today?.pv || 0);
-        $Data.realtimeStats.todayUv = Number(onlineStatsData?.today?.uv || 0);
-        $Data.realtimeStats.days = Array.isArray(onlineStatsData?.days) ? onlineStatsData.days : [];
-    },
-    applyInfoStatsData: function (infoStatsData) {
-        $Data.uaStats.deviceTypes = Array.isArray(infoStatsData?.today?.deviceTypes) ? infoStatsData.today.deviceTypes : [];
-        $Data.uaStats.browsers = Array.isArray(infoStatsData?.today?.browsers) ? infoStatsData.today.browsers : [];
-        $Data.uaStats.browserVersions = Array.isArray(infoStatsData?.today?.browserVersions) ? infoStatsData.today.browserVersions : [];
-        $Data.uaStats.osList = Array.isArray(infoStatsData?.today?.osList) ? infoStatsData.today.osList : [];
-        $Data.uaStats.osVersions = Array.isArray(infoStatsData?.today?.osVersions) ? infoStatsData.today.osVersions : [];
-        $Data.uaStats.deviceVendors = Array.isArray(infoStatsData?.today?.deviceVendors) ? infoStatsData.today.deviceVendors : [];
-        $Data.uaStats.deviceModels = Array.isArray(infoStatsData?.today?.deviceModels) ? infoStatsData.today.deviceModels : [];
-        $Data.uaStats.engines = Array.isArray(infoStatsData?.today?.engines) ? infoStatsData.today.engines : [];
-        $Data.uaStats.cpuArchitectures = Array.isArray(infoStatsData?.today?.cpuArchitectures) ? infoStatsData.today.cpuArchitectures : [];
-    },
-    mapProductOptions: function (onlineStatsData) {
-        if (!Array.isArray(onlineStatsData?.products)) {
-            return [];
-        }
-
-        return onlineStatsData.products.map((item) => {
-            return {
-                key: String(item?.key || item?.productName || ""),
-                productName: String(item?.productName || "-"),
-                today: {
-                    pv: Number(item?.today?.pv || 0),
-                    uv: Number(item?.today?.uv || 0)
-                },
-                week: {
-                    pv: Number(item?.week?.pv || 0),
-                    uv: Number(item?.week?.uv || 0)
-                },
-                month: {
-                    pv: Number(item?.month?.pv || 0),
-                    uv: Number(item?.month?.uv || 0)
-                },
-                days: Array.isArray(item?.days) ? item.days : [],
-                totalPv: Number(item?.totalPv || 0),
-                totalUv: Number(item?.totalUv || 0)
-            };
-        });
-    },
-    useSingleProductFallback: function (onlineStatsData) {
-        const days = Array.isArray(onlineStatsData?.days) ? onlineStatsData.days : [];
-
-        return [
-            {
-                key: $Data.productInfo.productName,
-                productName: $Data.productInfo.productName,
-                today: {
-                    pv: Number(onlineStatsData?.today?.pv || 0),
-                    uv: Number(onlineStatsData?.today?.uv || 0)
-                },
-                week: {
-                    pv: Number(onlineStatsData?.week?.pv || 0),
-                    uv: Number(onlineStatsData?.week?.uv || 0)
-                },
-                month: {
-                    pv: Number(onlineStatsData?.month?.pv || 0),
-                    uv: Number(onlineStatsData?.month?.uv || 0)
-                },
-                days: days,
-                totalPv: $Method.sumTrendField(days, "pv"),
-                totalUv: $Method.sumTrendField(days, "uv")
-            }
-        ];
-    },
-    applyProductOptions: function (onlineStatsData, infoStatsData) {
-        $Data.productState.options = $Method.mapProductOptions(onlineStatsData);
-
-        const onlyOneProduct = Array.isArray(infoStatsData?.month?.productNames) && infoStatsData.month.productNames.length === 1;
-
-        if (onlyOneProduct && $Data.productInfo.productName !== "-") {
-            $Data.productState.options = $Method.useSingleProductFallback(onlineStatsData);
-        }
-    },
-    updateSelectedProductOption: function (selectedKey, onlineStatsData) {
-        if (!selectedKey || selectedKey === "all-products") {
-            return;
-        }
-
-        const selectedIndex = $Data.productState.options.findIndex((item) => item.key === selectedKey);
-
-        if (selectedIndex < 0) {
-            return;
-        }
-
-        const days = Array.isArray(onlineStatsData?.days) ? onlineStatsData.days : [];
-        const current = $Data.productState.options[selectedIndex];
-
-        $Data.productState.options[selectedIndex] = {
-            key: current.key,
-            productName: current.productName,
-            today: {
-                pv: Number(onlineStatsData?.today?.pv || 0),
-                uv: Number(onlineStatsData?.today?.uv || 0)
-            },
-            week: {
-                pv: Number(onlineStatsData?.week?.pv || 0),
-                uv: Number(onlineStatsData?.week?.uv || 0)
-            },
-            month: {
-                pv: Number(onlineStatsData?.month?.pv || 0),
-                uv: Number(onlineStatsData?.month?.uv || 0)
-            },
-            days: days,
-            totalPv: $Method.sumTrendField(days, "pv"),
-            totalUv: $Method.sumTrendField(days, "uv")
-        };
-    },
-    fetchProductStats: async function (selectedKey) {
-        if ($Data.productState.loading) {
-            return;
-        }
-
-        $Data.productState.loading = true;
-
-        try {
-            const productName = $Method.getSelectedProductName(selectedKey);
-            const requestBody = productName ? { productName: productName } : {};
-            const [onlineStatsRes, infoStatsRes] = await Promise.all([$Http("/core/tongJi/onlineStats", requestBody, [""]), $Http("/core/tongJi/infoStats", requestBody, [""])]);
-
-            $Method.applyOnlineStatsData(onlineStatsRes.data);
-            $Method.applyInfoStatsData(infoStatsRes.data);
-            $Method.updateSelectedProductOption(selectedKey, onlineStatsRes.data);
-        } catch (_error) {
-            // 静默失败：不阻断页面展示
-        } finally {
-            $Data.productState.loading = false;
-        }
-    },
-    sumTrendField: function (list, field) {
-        let total = 0;
-
-        for (const item of list) {
-            total += Number(item?.[field] || 0);
-        }
-
-        return total;
-    },
-    sortTrendList: function (list, keyField) {
-        const result = Array.isArray(list) ? list.slice() : [];
-
-        result.sort((a, b) => Number(a?.[keyField] || 0) - Number(b?.[keyField] || 0));
-        return result;
-    },
-    buildTrendPreview: function (list, maxCount) {
-        if (list.length <= maxCount) {
-            return list;
-        }
-
-        const preview = [];
-        const usedIndex = new Set();
-
-        for (let i = 0; i < maxCount; i++) {
-            const index = Math.round((i * (list.length - 1)) / (maxCount - 1));
-
-            if (usedIndex.has(index)) {
-                continue;
-            }
-
-            usedIndex.add(index);
-            preview.push(list[index]);
-        }
-
-        return preview;
-    },
-    buildTrendBars: function (list, maxValue) {
-        const result = [];
-
-        for (const item of list) {
-            const pv = Number(item?.pv || 0);
-            const uv = Number(item?.uv || 0);
-
-            result.push({
-                reportDate: Number(item?.reportDate || 0),
-                pv: pv,
-                uv: uv,
-                pvHeight: pv > 0 ? `${Math.max((pv / maxValue) * 100, 6)}%` : "0%",
-                uvHeight: uv > 0 ? `${Math.max((uv / maxValue) * 100, 6)}%` : "0%"
-            });
-        }
-
-        return result;
-    },
-    getTrendMax: function (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;
-    },
-    formatDeviceType: function (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");
-    },
-    formatReportDate: function (reportDate) {
-        const text = String(reportDate || "");
-
-        if (text.length !== 8) {
-            return text;
-        }
-
-        return `${text.slice(4, 6)}-${text.slice(6, 8)}`;
-    },
     fetchData: async function () {
         try {
-            const [overviewRes, onlineStatsRes, infoStatsRes, errorStatsRes] = await Promise.all([$Http("/core/dashboard/systemOverview", {}, [""]), $Http("/core/tongJi/onlineStats", {}, [""]), $Http("/core/tongJi/infoStats", {}, [""]), $Http("/core/tongJi/errorStats", {}, [""])]);
+            const [overviewRes, errorStatsRes] = await Promise.all([$Http("/core/dashboard/systemOverview", {}, [""]), $Http("/core/tongJi/errorStats", {}, [""])]);
 
             Object.assign($Data.permissionStats, overviewRes.data);
-            $Method.applyOnlineStatsData(onlineStatsRes.data);
-            $Data.productInfo.productName = String($Config.productName || "-");
-            $Data.productInfo.productCode = String($Config.productCode || "-");
-            $Data.productInfo.productVersion = String($Config.productVersion || "-");
-            $Method.applyProductOptions(onlineStatsRes.data, infoStatsRes.data);
-            $Method.applyInfoStatsData(infoStatsRes.data);
             $Data.errorStats.trend = Array.isArray(errorStatsRes.data?.trend) ? errorStatsRes.data.trend : [];
-            $Method.ensureSelectedProduct();
         } catch (_error) {
             // 静默失败：不阻断页面展示
         }
@@ -602,72 +85,14 @@ const $Method = {
 };
 
 const $Computed = reactive({
-    errorTodayTrend: computed(() => $Method.sortTrendList($Data.errorStats.trend, "bucketTime")),
     errorTodayCount: computed(() => {
         let total = 0;
 
-        for (const item of $Computed.errorTodayTrend) {
+        for (const item of $Data.errorStats.trend) {
             total += Number(item.count || 0);
         }
 
         return total;
-    }),
-    productOptions: computed(() => {
-        const list = Array.isArray($Data.productState.options) ? $Data.productState.options.slice() : [];
-        const fallbackProduct = $Method.buildFallbackProduct();
-
-        if (list.length === 0) {
-            return [fallbackProduct];
-        }
-
-        list.sort((a, b) => {
-            if (a.productName === $Data.productInfo.productName && b.productName !== $Data.productInfo.productName) {
-                return -1;
-            }
-
-            if (b.productName === $Data.productInfo.productName && a.productName !== $Data.productInfo.productName) {
-                return 1;
-            }
-
-            if (Number(b.totalPv || 0) !== Number(a.totalPv || 0)) {
-                return Number(b.totalPv || 0) - Number(a.totalPv || 0);
-            }
-
-            return String(a.productName || "").localeCompare(String(b.productName || ""), "zh-CN");
-        });
-
-        return [fallbackProduct, ...list];
-    }),
-    selectedProduct: computed(() => {
-        const list = $Computed.productOptions;
-
-        if (list.length === 0) {
-            return null;
-        }
-
-        const matched = list.find((item) => item.key === $Data.productState.selectedKey);
-        return matched || list[0];
-    }),
-    selectedDaysTrend: computed(() => $Method.sortTrendList($Computed.selectedProduct?.days || [], "reportDate")),
-    selectedDaysFilled: computed(() => $Method.buildFilledTrendDays($Computed.selectedProduct?.days || [], 30)),
-    selectedDaysHasData: computed(() => $Computed.selectedDaysTrend.length > 0),
-    selectedDaysTrendPreview: computed(() => $Method.buildTrendPreview($Computed.selectedDaysFilled, 10)),
-    selectedDaysBars: computed(() => $Method.buildTrendBars($Computed.selectedDaysFilled, $Method.getTrendMax($Computed.selectedDaysFilled))),
-    productPeriodCards: computed(() => {
-        const list = $Computed.selectedDaysFilled;
-        const today = list[list.length - 1] || { pv: 0, uv: 0 };
-        const yesterday = list[list.length - 2] || { pv: 0, uv: 0 };
-        const dayBeforeYesterday = list[list.length - 3] || { pv: 0, uv: 0 };
-        const recent7 = $Method.sumTrendRange(list.slice(-7));
-        const recent30 = $Method.sumTrendRange(list);
-
-        return [
-            { key: "today", label: "今日", pv: today.pv, uv: today.uv },
-            { key: "yesterday", label: "昨日", pv: yesterday.pv, uv: yesterday.uv },
-            { key: "dayBeforeYesterday", label: "前日", pv: dayBeforeYesterday.pv, uv: dayBeforeYesterday.uv },
-            { key: "recent7", label: "最近7天", pv: recent7.pv, uv: recent7.uv },
-            { key: "recent30", label: "最近30天", pv: recent30.pv, uv: recent30.uv }
-        ];
     })
 });
 
@@ -675,550 +100,9 @@ $Method.fetchData();
 </script>
 
 <style scoped lang="scss">
-.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;
-}
+@use "../../../styles/dashboardCard.scss" as dashboardCard;
 
-.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);
-    }
-}
-
-.summary-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 4px;
-    width: 100%;
-    min-width: 0;
-}
-
-.summary-value,
-.metric-value,
-.metric-period-label,
-.metric-pair-value {
-    font-size: 22px;
-    font-weight: 700;
-    line-height: 1.1;
-    color: var(--text-primary);
-}
-
-.summary-value {
-    letter-spacing: -0.3px;
-    font-variant-numeric: tabular-nums;
-}
-
-.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-select-wrap {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.product-select {
-    width: 220px;
-}
-
-.product-metrics-grid {
-    display: grid;
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-    gap: 10px;
-}
-
-.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);
-}
-
-.metric-box-period {
-    gap: 12px;
-
-    &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 10px 24px rgba(31, 35, 41, 0.08);
-    }
-}
-
-.metric-period-label {
-    font-size: 12px;
-    font-weight: 700;
-    color: var(--text-secondary);
-    letter-spacing: 0.3px;
-}
-
-.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);
-}
-
-.metric-pair-value {
-    font-size: 22px;
-    font-weight: 700;
-    letter-spacing: -0.3px;
-    font-variant-numeric: tabular-nums;
-    color: #0052d9;
-}
-
-.metric-pair-value-uv {
-    color: #2ba471;
-}
-
-.trend-grid {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: 10px;
-}
-
-.trend-card {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.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-bars {
-    display: grid;
-    grid-template-columns: repeat(30, minmax(0, 1fr));
-    align-items: end;
-    gap: 0;
-    height: 148px;
-    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:
-        100% 25%,
-        3.333% 100%,
-        auto;
-}
-
-.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-bar-pv {
-    background: linear-gradient(180deg, rgba(0, 82, 217, 0.65), #0052d9);
-}
-
-.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 {
-    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));
-    }
-
-    .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));
-    }
-
-    .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-select-wrap {
-        width: 100%;
-        justify-content: flex-start;
-    }
-
-    .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) {
-    .summary-grid,
-    .product-metrics-grid,
-    .trend-briefs-wide {
-        grid-template-columns: 1fr;
-    }
-
-    .overview-card-large {
-        min-height: 0;
-    }
-
-    .product-select {
-        width: 100%;
-    }
-
-    .trend-bars {
-        grid-template-columns: repeat(7, minmax(0, 1fr));
-        height: 126px;
-    }
-
-    .trend-bar-group:nth-child(n + 8) {
-        display: none;
-    }
+.dashboard-card-row {
+    @include dashboardCard.dashboardCardStandard();
 }
 </style>