feat(admin): XHProf 运行详情页函数级分析

app/admin/view/xhprof/run/detail.js

@@ -0,0 +1,104 @@
+$(function () {
+    var $table = $('#funcTable');
+    var runId = parseInt($table.data('id'), 10);
+    if (!runId || isNaN(runId)) {
+        $('#sql-bar-text').text('缺少采样记录 id');
+        return;
+    }
+
+    var escapeHtml = function (s) {
+        return String(s == null ? '' : s)
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    };
+    // 微秒 → 可读耗时
+    var fmtUs = function (us) {
+        us = parseInt(us, 10) || 0;
+        if (us >= 1000000) {
+            return (us / 1000000).toFixed(2) + 's';
+        }
+        return (us / 1000).toFixed(2) + 'ms';
+    };
+    var fmtBytes = function (b) {
+        b = parseInt(b, 10) || 0;
+        if (b >= 1048576) {
+            return (b / 1048576).toFixed(2) + 'MB';
+        }
+        if (b >= 1024) {
+            return (b / 1024).toFixed(2) + 'KB';
+        }
+        return b + 'B';
+    };
+
+    // 接口模式请求同一路由（Accept: application/json 触发页面/接口同体的接口分支）
+    $.ajax({
+        url: 'xhprof.run/detail',
+        type: 'get',
+        data: {id: runId},
+        headers: {Accept: 'application/json'},
+        dataType: 'json',
+        success: function (res) {
+            if (!res || res.code !== 0 || !res.data) {
+                var msg = (res && res.msg) ? res.msg : '数据加载失败';
+                $('#sql-bar-text').text(msg);
+                layer.msg(msg, {icon: 2});
+                return;
+            }
+            var d = res.data;
+            var sql = d.sql_summary || {};
+            var pct = parseFloat(sql.wt_pct) || 0;
+
+            // 顶部 SQL 占比卡片 + SQL 摘要条
+            $('#summary-sql-pct').text(pct.toFixed(2));
+            $('#sql-bar').css('width', Math.min(100, pct) + '%');
+            $('#sql-bar-text').text(
+                'SQL 独占耗时 ' + fmtUs(sql.wt || 0)
+                + '（占总耗时 ' + pct.toFixed(2) + '%），命中函数 ' + (sql.fn_count || 0)
+                + ' 个，调用 ' + (sql.ct || 0) + ' 次'
+            );
+            $('#summary-fn-total').text(d.summary && d.summary.function_total ? d.summary.function_total : '-');
+
+            // 函数表：本地数据渲染（服务端已按独占耗时降序取 Top 100）
+            layui.use(['table'], function () {
+                var table = layui.table;
+                table.render({
+                    elem: '#funcTable',
+                    data: d.functions || [],
+                    even: true,
+                    page: false,
+                    limit: 1000,
+                    defaultToolbar: ['filter'],
+                    cols: [[
+                        {
+                            field: 'fn', title: '函数', minWidth: 380, templet: function (o) {
+                                return '<span title="' + escapeHtml(o.fn) + '">' + escapeHtml(o.fn) + '</span>';
+                            }
+                        },
+                        {field: 'ct', title: '调用次数', width: 100, sort: true},
+                        {
+                            field: 'excl_wt', title: '独占耗时', width: 130, sort: true, templet: function (o) {
+                                return fmtUs(o.excl_wt);
+                            }
+                        },
+                        {
+                            field: 'incl_wt', title: '包含耗时', width: 130, sort: true, templet: function (o) {
+                                return fmtUs(o.incl_wt);
+                            }
+                        },
+                        {
+                            field: 'mu', title: '内存增量', width: 120, sort: true, templet: function (o) {
+                                return fmtBytes(o.mu);
+                            }
+                        }
+                    ]]
+                });
+            });
+        },
+        error: function () {
+            $('#sql-bar-text').text('请求失败，请刷新重试');
+            layer.msg('请求失败', {icon: 2});
+        }
+    });
+});