befly-admin-ui 1.10.18 → 1.10.19

package/views/index/components/projectStats.vue

@@ -0,0 +1,392 @@
+<template>
+    <div class="section-block">
+        <div class="section-header flex items-center gap-2">
+            <ChartIcon />
+            <h2>项目统计</h2>
+        </div>
+
+        <div class="section-content">
+            <div class="project-row-list">
+                <div v-for="item in $Computed.productRows" :key="item.key" class="product-row">
+                    <div class="product-row-main">
+                        <div class="product-row-name">
+                            <span>{{ item.productName }}</span>
+                            <span v-if="item.productCode" class="product-row-code">({{ item.productCode }})</span>
+                        </div>
+                        <div class="product-row-online">
+                            <span>在线人数</span>
+                            <strong>{{ item.onlineCount }}</strong>
+                        </div>
+                    </div>
+
+                    <div class="project-metrics">
+                        <div class="metric-card">
+                            <div class="metric-label">今日</div>
+                            <div class="metric-values">
+                                <div class="metric-value">
+                                    <span>PV</span>
+                                    <strong class="metric-value-pv">{{ item.today.pv }}</strong>
+                                </div>
+                                <div class="metric-value">
+                                    <span>UV</span>
+                                    <strong class="metric-value-uv">{{ item.today.uv }}</strong>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="metric-card">
+                            <div class="metric-label">昨日</div>
+                            <div class="metric-values">
+                                <div class="metric-value">
+                                    <span>PV</span>
+                                    <strong class="metric-value-pv">{{ item.yesterday.pv }}</strong>
+                                </div>
+                                <div class="metric-value">
+                                    <span>UV</span>
+                                    <strong class="metric-value-uv">{{ item.yesterday.uv }}</strong>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="metric-card">
+                            <div class="metric-label">前天</div>
+                            <div class="metric-values">
+                                <div class="metric-value">
+                                    <span>PV</span>
+                                    <strong class="metric-value-pv">{{ item.dayBeforeYesterday.pv }}</strong>
+                                </div>
+                                <div class="metric-value">
+                                    <span>UV</span>
+                                    <strong class="metric-value-uv">{{ item.dayBeforeYesterday.uv }}</strong>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="metric-card">
+                            <div class="metric-label">近30天</div>
+                            <div class="metric-values">
+                                <div class="metric-value">
+                                    <span>PV</span>
+                                    <strong class="metric-value-pv">{{ item.recent30.pv }}</strong>
+                                </div>
+                                <div class="metric-value">
+                                    <span>UV</span>
+                                    <strong class="metric-value-uv">{{ item.recent30.uv }}</strong>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="metric-card">
+                            <div class="metric-label">本月</div>
+                            <div class="metric-values">
+                                <div class="metric-value">
+                                    <span>PV</span>
+                                    <strong class="metric-value-pv">{{ item.month.pv }}</strong>
+                                </div>
+                                <div class="metric-value">
+                                    <span>UV</span>
+                                    <strong class="metric-value-uv">{{ item.month.uv }}</strong>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, reactive } from "vue";
+
+import { $Http } from "@/plugins/http.js";
+
+const $Data = reactive({
+    productState: {
+        options: []
+    }
+});
+
+const $Method = {
+    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 index = limit - 1; index >= 0; index -= 1) {
+            list.push($Method.getReportDateNumber(Date.now() - index * 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
+        };
+    },
+    buildPeriodStats: function (days) {
+        const list = $Method.buildFilledTrendDays(days, 30);
+        const yesterday = list[list.length - 2] || { pv: 0, uv: 0 };
+        const dayBeforeYesterday = list[list.length - 3] || { pv: 0, uv: 0 };
+
+        return {
+            yesterday: {
+                pv: Number(yesterday.pv || 0),
+                uv: Number(yesterday.uv || 0)
+            },
+            dayBeforeYesterday: {
+                pv: Number(dayBeforeYesterday.pv || 0),
+                uv: Number(dayBeforeYesterday.uv || 0)
+            },
+            recent30: $Method.sumTrendRange(list)
+        };
+    },
+    buildProjectRow: function (rawItem, statsItem) {
+        const periodStats = $Method.buildPeriodStats(Array.isArray(statsItem?.days) ? statsItem.days : []);
+
+        return {
+            key: String(rawItem?.key || ""),
+            productName: String(rawItem?.productName || "-"),
+            productCode: String(rawItem?.productCode || ""),
+            productVersion: String(rawItem?.productVersion || ""),
+            onlineCount: Number(statsItem?.onlineCount || 0),
+            today: {
+                pv: Number(statsItem?.today?.pv || 0),
+                uv: Number(statsItem?.today?.uv || 0)
+            },
+            yesterday: periodStats.yesterday,
+            dayBeforeYesterday: periodStats.dayBeforeYesterday,
+            recent30: periodStats.recent30,
+            month: {
+                pv: Number(statsItem?.month?.pv || 0),
+                uv: Number(statsItem?.month?.uv || 0)
+            }
+        };
+    },
+    mapProjectRows: function (onlineStatsData) {
+        if (!Array.isArray(onlineStatsData?.products)) {
+            return [];
+        }
+
+        return onlineStatsData.products
+            .map((item) => {
+                const productName = String(item?.productName || "-");
+
+                return $Method.buildProjectRow(
+                    {
+                        key: String(item?.key || productName),
+                        productName: productName,
+                        productCode: String(item?.productCode || ""),
+                        productVersion: String(item?.productVersion || "")
+                    },
+                    item
+                );
+            })
+            .filter((item) => {
+                return Boolean(item.key);
+            });
+    },
+    fetchData: async function () {
+        try {
+            const onlineStatsRes = await $Http("/core/tongJi/onlineStats", {}, [""]);
+            $Data.productState.options = $Method.mapProjectRows(onlineStatsRes.data);
+        } catch (_error) {
+            // 静默失败：不阻断页面展示
+        }
+    }
+};
+
+const $Computed = reactive({
+    productRows: computed(() => {
+        return Array.isArray($Data.productState.options) ? $Data.productState.options.slice() : [];
+    })
+});
+
+$Method.fetchData();
+</script>
+
+<style scoped lang="scss">
+@use "../../../styles/dashboardCard.scss" as dashboardCard;
+
+.project-row-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.product-row {
+    display: grid;
+    grid-template-columns: minmax(180px, 0.75fr) minmax(0, 2.25fr);
+    gap: 16px;
+    align-items: stretch;
+}
+
+.product-row-main {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    min-width: 0;
+    text-align: left;
+
+    @include dashboardCard.dashboardCardShell();
+
+    justify-content: flex-start;
+}
+
+.product-row-name {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 4px;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--text-primary);
+}
+
+.product-row-code {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.metric-label {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--text-primary);
+}
+
+.metric-value span,
+.product-row-online span {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.2;
+    color: var(--text-secondary);
+}
+
+.product-row-online {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    white-space: nowrap;
+    text-align: left;
+}
+
+.product-row-online strong {
+    @include dashboardCard.dashboardCardNumericValue(#d54941);
+
+    color: var(--error-color);
+}
+
+.project-metrics {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 16px;
+    text-align: left;
+}
+
+.metric-card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    text-align: left;
+
+    @include dashboardCard.dashboardCardShell();
+
+    justify-content: flex-start;
+    min-height: 100%;
+    padding: 12px;
+}
+
+.metric-values {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    align-items: end;
+    width: 100%;
+}
+
+.metric-value {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-end;
+    gap: 6px;
+    min-width: 0;
+}
+
+.metric-value strong {
+    @include dashboardCard.dashboardCardNumericValue();
+
+    text-align: left;
+    white-space: nowrap;
+}
+
+.metric-value-pv {
+    color: #0052d9;
+}
+
+.metric-value-uv {
+    color: #2ba471;
+}
+
+@media (max-width: 1280px) {
+    .project-metrics {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .product-row {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 720px) {
+    .project-metrics {
+        grid-template-columns: 1fr;
+    }
+}
+</style>

package/views/index/components/serviceStatus.vue

@@ -5,23 +5,24 @@
             <h2>服务状态</h2>
         </div>
         <div class="section-content">
-            <div class="config-grid">
-                <div v-for="service in $Data.services" :key="service.name" class="config-card" :class="`config-${service.status}`">
-                    <div class="config-info">
-                        <div class="config-name">{{ service.name }}</div>
-                        <div class="config-status">
-                            {{ $Method.getStatusText(service.status) }}
-                            <span v-if="service.responseTime && service.responseTime !== '-'" class="latency">{{ service.responseTime }}</span>
+            <t-row :gutter="[16, 16]" class="dashboard-card-row">
+                <t-col v-for="service in $Data.services" :key="service.name" :span="2" class="dashboard-card-col">
+                    <div class="dashboard-card" :class="$Const.statusStyleMap[service.status]?.card || ''">
+                        <div class="dashboard-card-content">
+                            <div class="dashboard-card-label" :class="$Const.statusStyleMap[service.status]?.label || ''">{{ service.name }}</div>
+                            <div class="dashboard-card-value-row">
+                                <div class="dashboard-card-main dashboard-card-main--muted">{{ $Method.getStatusText(service.status) }}</div>
+                                <span v-if="service.responseTime && service.responseTime !== '-'" class="dashboard-card-accent">{{ service.responseTime }}</span>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
+                </t-col>
+            </t-row>
         </div>
     </div>
 </template>
 
 <script setup>
-import { CheckCircleIcon } from "tdesign-icons-vue-next";
 import { reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";
@@ -36,6 +37,20 @@ const $Const = {
         running: "正常",
         stopped: "停止",
         unconfigured: "未配置"
+    },
+    statusStyleMap: {
+        running: {
+            card: "dashboard-card--success",
+            label: "dashboard-card-label--success"
+        },
+        stopped: {
+            card: "dashboard-card--error",
+            label: "dashboard-card-label--error"
+        },
+        unconfigured: {
+            card: "dashboard-card--warning",
+            label: "dashboard-card-label--warning"
+        }
     }
 };
 
@@ -58,101 +73,9 @@ $Method.fetchData();
 </script>
 
 <style scoped lang="scss">
-.config-grid {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 10px;
-
-    .config-card {
-        background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.018), rgba(255, 255, 255, 0.96));
-        border: 1px solid rgba(0, 0, 0, 0.06);
-        border-radius: 8px;
-        padding: 14px;
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        min-height: 92px;
-        position: relative;
-        overflow: hidden;
-        transition: all 0.3s;
-
-        &:hover {
-            background: rgba(var(--primary-color-rgb), 0.05);
-            border-color: var(--primary-color);
-            transform: translateY(-2px);
-            box-shadow: 0 8px 18px rgba(31, 35, 41, 0.08);
-        }
-
-        .config-info {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            gap: 4px;
-            flex: 1;
-            width: 100%;
-            min-width: 0;
-
-            .config-name {
-                font-size: 14px;
-                font-weight: 600;
-                line-height: 1.2;
-            }
-
-            .config-status {
-                font-size: 12px;
-                display: flex;
-                align-items: baseline;
-                flex-wrap: wrap;
-                gap: 4px;
-                line-height: 1.2;
-                color: var(--text-secondary);
-
-                .latency {
-                    margin-left: 4px;
-                    font-size: 14px;
-                    font-weight: 700;
-                    line-height: 1.1;
-                    font-variant-numeric: tabular-nums;
-                    color: var(--primary-color);
-                }
-            }
-        }
-
-        &.config-running {
-            border-color: var(--success-color);
-
-            .config-name {
-                color: var(--success-color);
-            }
-        }
+@use "../../../styles/dashboardCard.scss" as dashboardCard;
 
-        &.config-unconfigured {
-            border-color: var(--warning-color);
-
-            .config-name {
-                color: var(--warning-color);
-            }
-        }
-
-        &.config-stopped {
-            border-color: var(--error-color);
-
-            .config-name {
-                color: var(--error-color);
-            }
-        }
-    }
-}
-
-@media (max-width: 1200px) {
-    .config-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-}
-
-@media (max-width: 640px) {
-    .config-grid {
-        grid-template-columns: 1fr;
-    }
+.dashboard-card-row {
+    @include dashboardCard.dashboardCardStandard();
 }
 </style>