@kylincloud/flamegraph 0.35.9 → 0.35.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kylincloud/flamegraph",
-  "version": "0.35.9",
+  "version": "0.35.10",
   "description": "KylinCloud flamegraph renderer (Pyroscope-based)",
   "license": "Apache-2.0",
   "main": "dist/index.node.cjs.js",

package/src/ProfilerTable.tsx

@@ -500,19 +500,32 @@ const ProfilerTable = React.memo(function ProfilerTable({
   selectedItem,
 }: Omit<ProfilerTableProps, 'tableBodyRef'>) {
   const tableBodyRef = useRef<HTMLTableSectionElement>(null);
+  const isDoubles = flamebearer.format === 'double';
 
   return (
-    <div data-testid="table-view">
-      <Table
-        tableBodyRef={tableBodyRef}
-        flamebearer={flamebearer}
-        isDoubles={flamebearer.format === 'double'}
-        fitMode={fitMode}
-        highlightQuery={highlightQuery}
-        handleTableItemClick={handleTableItemClick}
-        palette={palette}
-        selectedItem={selectedItem}
-      />
+    <div
+      data-testid="table-view"
+      className={
+        isDoubles
+          ? 'flamegraph-table-wrapper flamegraph-table-wrapper--double'
+          : 'flamegraph-table-wrapper'
+      }
+    >
+      {/* 内部滚动容器：只控制表格本身的高度和滚动 */}
+      <div className="flamegraph-table-scroll">
+        <Table
+          tableBodyRef={tableBodyRef}
+          flamebearer={flamebearer}
+          isDoubles={isDoubles}
+          fitMode={fitMode}
+          highlightQuery={highlightQuery}
+          handleTableItemClick={handleTableItemClick}
+          palette={palette}
+          selectedItem={selectedItem}
+        />
+      </div>
+
+      {/* Tooltip 保持原有行为 */}
       <TableTooltip
         tableBodyRef={tableBodyRef}
         numTicks={flamebearer.numTicks}

package/src/sass/_css-variables.scss

@@ -54,6 +54,10 @@
   --ps-table-highlight-row-text: #000000;
   --ps-table-row-text-shadow: #000000;
 
+  // 表头（使用实心背景，避免 sticky 时透出内容）
+  --ps-table-header-bg: #212124;
+  --ps-table-header-text: #d8d8d8;
+
   // 选择器
   --ps-selected-app: #df8b53;
   --ps-select-modal-title: #888888;
@@ -113,7 +117,7 @@
 // 说明：light 和 kylin 先共享一整套浅色变量，避免回退到 dark
 // ==========================================================================
 [data-theme='light'],
-[data-theme='kylin'],                // ✅ 新增：Box 主题为 kylin 时也用浅色基线
+[data-theme='kylin'],                // Box 主题为 kylin 时也用浅色基线
 [data-flamegraph-color-mode='light'],
 [data-flamegraph-color-mode='kylin'] {
   --ps-neutral-1: #ffffff;
@@ -147,6 +151,11 @@
   --ps-table-highlight-row-bg: #3b78e7;
   --ps-table-highlight-row-text: #ffffff;
   --ps-table-row-text-shadow: #ffffff;
+
+  // 表头默认浅色（浅灰背景 + 深色文字）
+  --ps-table-header-bg: #f8f8f8;
+  --ps-table-header-text: #272727;
+
   --ps-selected-app: #3b78e7;
   --ps-select-modal-title: #888888;
 
@@ -171,7 +180,7 @@
 // ==========================================================================
 // Kylin Theme - 在浅色基线上的微调（更贴近 AntD 白色系）
 // ==========================================================================
-[data-theme='kylin'],                 // ✅ 新增：Box 主题为 kylin 时应用这些微调
+[data-theme='kylin'],
 [data-flamegraph-color-mode='kylin'] {
   // 整体背景更接近 AntD
   --ps-ui-background: #f5f5f5;
@@ -198,4 +207,8 @@
   --ps-tooltip-bg: #ffffff;
   --ps-tooltip-text: #000000;
   --ps-tooltip-header-bg: #f0f0f0;
+
+  // 表头专用：完全不透明的白色
+  --ps-table-header-bg: #ffffff;
+  --ps-table-header-text: #000000;
 }

package/src/sass/flamegraph.scss

@@ -16,3 +16,62 @@ pyro-flamegraph {
   font: 400 16px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
     Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
+
+/* =========================
+ * Diff 模式下表格滚动 & 表头固定
+ * 仅在 flamebearer.format === 'double' 时生效
+ * ========================= */
+
+.flamegraph-table-wrapper {
+  /* 这里不限制高度，由内部滚动容器控制 */
+  position: relative;
+}
+
+/* 只在差分火焰图（double）模式下启用滚动限制 */
+.flamegraph-table-wrapper--double .flamegraph-table-scroll {
+  /* 最大高度：1000px，可按需调小/调大 */
+  max-height: var(--kylin-flamegraph-table-max-height, 1000px);
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* 让 sticky 参照这个容器 */
+  position: relative;
+}
+
+/* 表头固定 + 不透明背景，避免内容透出来 */
+.flamegraph-table-wrapper--double .flamegraph-table-scroll thead {
+  position: sticky;
+  top: 0;
+  z-index: 3; // 比下面的行和 tooltip 都高一点
+}
+
+/* 整行都有底色，避免列间缝隙透出内容 */
+.flamegraph-table-wrapper--double .flamegraph-table-scroll thead tr {
+  background-color: var(--ps-neutral-9);
+}
+
+/* 每个单元格再补一层底色，保证完全不透明 */
+.flamegraph-table-wrapper--double .flamegraph-table-scroll thead th {
+  background-color: var(--ps-neutral-9);
+  background-clip: padding-box; // 防止边框区域产生透明感
+}
+
+/* 可选：加一点阴影，视觉上和下面的行分层 */
+.flamegraph-table-wrapper--double .flamegraph-table-scroll thead {
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+
+/* 可选：稍微美化一下内部滚动条，轨道透明，避免太抢眼 */
+.flamegraph-table-wrapper--double .flamegraph-table-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.flamegraph-table-wrapper--double .flamegraph-table-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.flamegraph-table-wrapper--double .flamegraph-table-scroll::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.18);
+  border-radius: 4px;
+}

package/src/shims/Table.module.scss

@@ -2,6 +2,12 @@
   width: 100%;
   table-layout: fixed;
 
+  /* 表头：用专门的实心背景变量，避免透明 */
+  thead {
+    background-color: var(--ps-table-header-bg, var(--ps-ui-foreground, #ffffff));
+    color: var(--ps-table-header-text, var(--ps-ui-foreground-text, #000000));
+  }
+
   thead th {
     &.sortable {
       cursor: pointer;
@@ -29,7 +35,7 @@
     }
   }
 
-  thead,
+  /* 斑马纹只应用在 tbody 行，不再影响 thead */
   tbody tr:nth-child(2n) {
     background-color: var(--ps-neutral-9);
   }