befly-admin-ui 1.46.0 → 1.48.0

package/components/pageTableDetail.vue

@@ -33,7 +33,7 @@
         </div>
 
         <div v-if="$Prop.isPagination" class="main-page">
-            <TPagination :current-page="$Data.pager.currentPage" :page-size="$Data.pager.limit" :total="$Data.pager.total" align="right" :layout="$Prop.paginationLayout" @current-change="$Method.onPageChange" @page-size-change="$Method.onPageSizeChange" />
+            <TPagination :current="$Data.pager.current" :page-size="$Const.pageLimit" :total="$Data.pager.total" :showPageSize="false" align="right" layout="total, prev, pager, next" @current-change="$Method.onPageChange" />
         </div>
 
         <slot name="dialogs" :reload="$Method.reload" :current-row="$Data.currentRow"></slot>
@@ -66,18 +66,10 @@ const $Prop = defineProps({
         type: Boolean,
         default: true
     },
-    pageSize: {
-        type: Number,
-        default: 30
-    },
     endpoints: {
         type: Object,
         default: undefined
     },
-    paginationLayout: {
-        type: String,
-        default: "total, prev, pager, next, jumper"
-    },
     autoLoad: {
         type: Boolean,
         default: true
@@ -96,6 +88,7 @@ const $From = {
 };
 
 const $Const = {
+    pageLimit: 30,
     reservedSlotNames: ["toolLeft", "toolRight", "detail", "dialogs", "operation", "default"]
 };
 
@@ -103,8 +96,7 @@ const $Data = reactive({
     rows: [],
     loading: false,
     pager: {
-        currentPage: 1,
-        limit: $Prop.pageSize,
+        current: 1,
         total: 0
     },
     currentRow: null,
@@ -237,13 +229,13 @@ const $Method = {
             const limitKey = listEndpoint.limitKey || "limit";
 
             const data = {};
-            data[pageKey] = $Data.pager.currentPage;
-            data[limitKey] = $Data.pager.limit;
+            data[pageKey] = $Data.pager.current;
+            data[limitKey] = $Const.pageLimit;
 
             if (listEndpoint.buildData) {
                 const extra = listEndpoint.buildData({
-                    currentPage: $Data.pager.currentPage,
-                    limit: $Data.pager.limit
+                    currentPage: $Data.pager.current,
+                    limit: $Const.pageLimit
                 });
                 if (extra && typeof extra === "object") {
                     for (const key of Object.keys(extra)) {
@@ -263,9 +255,9 @@ const $Method = {
 
             const allowPageFallback = options?.allowPageFallback !== false;
             if (allowPageFallback && lists.length === 0 && total > 0) {
-                const lastPage = $Method.getLastPage(total, $Data.pager.limit);
-                if ($Data.pager.currentPage > lastPage) {
-                    $Data.pager.currentPage = lastPage;
+                const lastPage = $Method.getLastPage(total, $Const.pageLimit);
+                if ($Data.pager.current > lastPage) {
+                    $Data.pager.current = lastPage;
                     await $Method.loadList({
                         keepSelection: false,
                         allowPageFallback: false
@@ -292,22 +284,17 @@ const $Method = {
     },
     reload: async function (options) {
         if (options?.resetPage) {
-            $Data.pager.currentPage = 1;
+            $Data.pager.current = 1;
         }
         await $Method.loadList({
             keepSelection: options?.keepSelection,
             allowPageFallback: true
         });
     },
-    onPageChange: function (info) {
-        $Data.pager.currentPage = info.currentPage;
+    onPageChange: function (current) {
+        $Data.pager.current = current;
         $Method.reload({ keepSelection: true });
     },
-    onPageSizeChange: function (info) {
-        $Data.pager.limit = info.pageSize;
-        $Data.pager.currentPage = 1;
-        $Method.reload({ keepSelection: false });
-    },
     onActiveChange: function (value, context) {
         if (value.length === 0) {
             if ($Data.activeRowKeys.length > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "befly-admin-ui",
-    "version": "1.46.0",
+    "version": "1.48.0",
     "gitHead": "071d17be177355cdd61f30659c6e4c5873f87d39",
     "private": false,
     "description": "Befly - 管理后台功能组件",

package/views/log/error/index.vue

@@ -99,17 +99,19 @@ import { reactive } from "vue";
 
 const $Data = reactive({
     columns: withDefaultColumns([
-        { colKey: "productName", title: "产品名称" },
+        { colKey: "productName", title: "产品名称", width:120 },
         { colKey: "productCode", title: "产品代号", width: 150 },
-        { colKey: "productVersion", title: "产品版本", width: 130 },
+        
+        { colKey: "errorType", title: "错误类型", width: 120 },  
+        { colKey: "message", title: "错误信息", ellipsis: true },
+        { colKey: "productVersion", title: "产品版本", width: 130 }, 
         { colKey: "pageName", title: "页面名称" },
         { colKey: "pagePath", title: "页面路径", width: 220, ellipsis: true },
-        { colKey: "errorType", title: "错误类型", width: 120 },
-        { colKey: "deviceType", title: "设备类型", width: 110 },
-        { colKey: "browserName", title: "浏览器", width: 140 },
-        { colKey: "osName", title: "操作系统", width: 140 },
-        { colKey: "hitCount", title: "次数", width: 100 },
-        { colKey: "message", title: "错误信息", ellipsis: true },
+        
+        { colKey: "deviceType", title: "设备类型", width: 100 }, 
+        { colKey: "browserName", title: "浏览器", width: 100 }, 
+        { colKey: "osName", title: "操作系统", width: 100 },
+        { colKey: "hitCount", title: "次数", width: 100 }, 
         { colKey: "source", title: "来源", width: 100 },
         { colKey: "reportTime", title: "上报时间", width: 170 },
         { colKey: "firstReportTime", title: "首次上报", width: 170, detail: true },
@@ -122,7 +124,7 @@ const $Data = reactive({
         { colKey: "engineName", title: "渲染引擎", detail: true },
         { colKey: "cpuArchitecture", title: "CPU架构", detail: true },
         { colKey: "userAgent", title: "UA字符串", detail: true },
-        { colKey: "detail", title: "错误详情", detail: true }
+        { colKey: "detail", title: "错误详情", detail: true } 
     ]),
     endpoints: {
         list: {

package/views/projectStats/index.vue

@@ -9,40 +9,51 @@
             <div class="section-content">
                 <div class="project-row-list">
                     <div v-for="item in $Computed.productRows" :key="item.key" class="product-row">
-                        <div class="metric-card">
-                            <span class="metric-label">产品名称</span>
-                            <strong class="metric-value-name">{{ item.productCode || item.productName }}</strong>
-                        </div>
-
-                        <div class="metric-card">
-                            <span class="metric-label">在线人数</span>
-                            <strong class="metric-value-online">{{ item.onlineCount }}</strong>
-                        </div>
-
-                        <div class="metric-card">
-                            <span class="metric-label">今日访客</span>
-                            <strong class="metric-value-visitor">{{ item.today }}</strong>
-                        </div>
-
-                        <div class="metric-card">
-                            <span class="metric-label">昨日访客</span>
-                            <strong class="metric-value-visitor">{{ item.yesterday }}</strong>
-                        </div>
-
-                        <div class="metric-card">
-                            <span class="metric-label">前天访客</span>
-                            <strong class="metric-value-visitor">{{ item.dayBeforeYesterday }}</strong>
-                        </div>
-
-                        <div class="metric-card">
-                            <span class="metric-label">近30天访客</span>
-                            <strong class="metric-value-visitor">{{ item.recent30 }}</strong>
-                        </div>
-
-                        <div class="metric-card">
-                            <span class="metric-label">本月访客</span>
-                            <strong class="metric-value-visitor">{{ item.month }}</strong>
-                        </div>
+                        <div class="product-title">{{ $Method.formatProductTitle(item) }}</div>
+
+                        <t-row :gutter="[16, 16]">
+                            <t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
+                                <div class="metric-card">
+                                    <span class="metric-label">在线人数</span>
+                                    <strong class="metric-value-online">{{ item.onlineCount }}</strong>
+                                </div>
+                            </t-col>
+
+                            <t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
+                                <div class="metric-card">
+                                    <span class="metric-label">今日访客</span>
+                                    <strong class="metric-value-visitor">{{ item.today }}</strong>
+                                </div>
+                            </t-col>
+
+                            <t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
+                                <div class="metric-card">
+                                    <span class="metric-label">昨日访客</span>
+                                    <strong class="metric-value-visitor">{{ item.yesterday }}</strong>
+                                </div>
+                            </t-col>
+
+                            <t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
+                                <div class="metric-card">
+                                    <span class="metric-label">前天访客</span>
+                                    <strong class="metric-value-visitor">{{ item.dayBeforeYesterday }}</strong>
+                                </div>
+                            </t-col>
+
+                            <t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
+                                <div class="metric-card">
+                                    <span class="metric-label">近30天访客</span>
+                                    <strong class="metric-value-visitor">{{ item.recent30 }}</strong>
+                                </div>
+                            </t-col>
+
+                            <t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
+                                <div class="metric-card">
+                                    <span class="metric-label">本月访客</span>
+                                    <strong class="metric-value-visitor">{{ item.month }}</strong>
+                                </div>
+                            </t-col>
+                        </t-row>
                     </div>
                 </div>
             </div>
@@ -52,6 +63,7 @@
 
 <script setup>
 import { ChartIcon } from "tdesign-icons-vue-next";
+import { Col as TCol, Row as TRow } from "tdesign-vue-next";
 import { computed, reactive } from "vue";
 
 import { $Http } from "@/plugins/http.js";
@@ -77,6 +89,16 @@ const $Method = {
             month: Number(visitItem?.month || 0)
         };
     },
+    formatProductTitle: function (row) {
+        const productName = row?.productName;
+        const productCode = row?.productCode;
+
+        if (productName && productCode) {
+            return `${productName}(${productCode})`;
+        }
+
+        return productName || productCode || "-";
+    },
     mapProjectRows: function (infoStatsData, onlineStatsData) {
         const onlineMap = new Map();
 
@@ -137,14 +159,24 @@ $Method.fetchData();
 .project-row-list {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 20px;
 }
 
 .product-row {
-    display: grid;
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-    gap: 16px;
-    align-items: stretch;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.product-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+    line-height: 1.2;
+}
+
+.metric-col {
+    min-width: 0;
 }
 
 .metric-label {
@@ -157,12 +189,6 @@ $Method.fetchData();
     color: var(--error-color);
 }
 
-.metric-value-name {
-    @include dashboardCard.dashboardCardMainValue();
-
-    text-align: left;
-}
-
 .metric-card {
     display: flex;
     flex-direction: column;
@@ -173,7 +199,6 @@ $Method.fetchData();
 
     gap: 8px;
     justify-content: flex-start;
-    min-height: 100%;
     padding: 12px;
 }
 
@@ -184,16 +209,4 @@ $Method.fetchData();
     text-align: left;
     white-space: nowrap;
 }
-
-@media (max-width: 1280px) {
-    .product-row {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-}
-
-@media (max-width: 720px) {
-    .product-row {
-        grid-template-columns: 1fr;
-    }
-}
 </style>