@kylincloud/flamegraph 0.35.8 → 0.35.10

package/src/FlamegraphRenderer.tsx

@@ -1,27 +1,50 @@
 // src/FlamegraphRenderer.tsx
 import React from 'react';
-import FlameGraphRenderer, {
+import FlameGraphRenderer from './FlameGraph/FlameGraphRenderer';
+import type {
   FlamegraphRendererProps as InnerFlamegraphRendererProps,
 } from './FlameGraph/FlameGraphRenderer';
+
 import './sass/flamegraph.scss';
+
 import {
   FlamegraphI18nProvider,
-  type FlamegraphMessages,
+  defaultMessages,
+  zhCNMessages,
 } from './i18n';
+import type { FlamegraphMessages } from './i18n';
 
 // 原项目里这个值由 webpack 注入，这里直接关掉 logo
 const overrideProps = {
   showPyroscopeLogo: false,
 };
 
+/** 对外暴露的 locale 类型 */
+export type FlamegraphLocale = 'auto' | 'en' | 'zh-CN';
+
 export type FlamegraphRendererProps = Omit<
   InnerFlamegraphRendererProps,
   'showPyroscopeLogo'
 > & {
   /** 颜色模式：原生 light/dark + 新增 kylin */
   colorMode?: 'light' | 'dark' | 'kylin';
-  /** 文案覆盖（不传就是内置默认英文/中文） */
+
+  /**
+   * 文案覆盖：
+   * - 如果显式传入 i18n，则优先使用这一套（不再根据 locale 推断）
+   * - 如果不传，则根据 locale（或浏览器语言）自动选择内置英文 / 中文
+   */
   i18n?: Partial<FlamegraphMessages>;
+
+  /**
+   * 语言设置：
+   * - 不传时等价于 "auto"
+   * - "auto" 表示根据浏览器语言（navigator.language）自动选择
+   * - "en" / "zh-CN" 为强制指定
+   */
+  locale?: FlamegraphLocale;
+  /** 是否开启三明治视图菜单 */
+   sandwich?: boolean;
 };
 
 // 让 TS 认识自定义标签 <pyro-flamegraph>
@@ -32,30 +55,90 @@ declare global {
       'pyro-flamegraph': React.DetailedHTMLProps<
         React.HTMLAttributes<HTMLElement>,
         HTMLElement
-      >;
+      > & {
+        profile?: any;
+      };
     }
   }
 }
 
-export const FlamegraphRenderer: React.FC<FlamegraphRendererProps> = (
-  props
-) => {
-  const { colorMode = 'dark', i18n, ...restProps } = props;
+/**
+ * 浏览器语言 -> 内部 locale
+ * SSR / 非浏览器环境时默认 en
+ */
+const detectBrowserLocale = (): Exclude<FlamegraphLocale, 'auto'> => {
+  if (typeof navigator === 'undefined' || !navigator.language) {
+    return 'en';
+  }
+
+  const lang = navigator.language.toLowerCase();
+
+  if (lang.startsWith('zh')) {
+    return 'zh-CN';
+  }
+
+  return 'en';
+};
+
+/**
+ * 决定实际使用的文案：
+ * 1. 如果调用方显式传了 i18n，则直接使用 i18n（优先级最高）；
+ * 2. 否则根据 locale / 浏览器语言选择内置英文或中文语言包。
+ */
+const resolveMessages = (
+  locale: FlamegraphLocale | undefined,
+  i18n?: Partial<FlamegraphMessages>
+): Partial<FlamegraphMessages> => {
+  // 业务显式传入 i18n，则不再干预
+  if (i18n) {
+    return i18n;
+  }
+
+  const effectiveLocale = locale ?? 'auto';
+  const finalLocale =
+    effectiveLocale === 'auto' ? detectBrowserLocale() : effectiveLocale;
+
+  if (finalLocale === 'zh-CN') {
+    return zhCNMessages;
+  }
+
+  // 默认英文
+  return defaultMessages;
+};
+
+/** 根据 colorMode 生成一个主题 class（可按你自己的 SCSS 改） */
+const getThemeClass = (colorMode: FlamegraphRendererProps['colorMode']) => {
+  switch (colorMode) {
+    case 'dark':
+      return 'ps-theme-dark';
+    case 'kylin':
+      return 'ps-theme-kylin';
+    case 'light':
+    default:
+      return 'ps-theme-light';
+  }
+};
+
+const FlamegraphRenderer: React.FC<FlamegraphRendererProps> = (props) => {
+  const { i18n, locale, colorMode = 'light', sandwich = true,...rest } = props;
+
+  const messages = React.useMemo(
+    () => resolveMessages(locale, i18n),
+    [locale, i18n]
+  );
+
+  const themeClass = React.useMemo(
+    () => getThemeClass(colorMode),
+    [colorMode]
+  );
 
-  // 虽然 pyro-flamegraph 不是合法的 HTML 元素
-  // 但它只是作为样式 scope 容器存在（配合 sass/flamegraph.scss 里的一堆选择器）
   return (
-    <pyro-flamegraph
-      is="span"
-      data-flamegraph-color-mode={colorMode}
-    >
-      <FlamegraphI18nProvider messages={i18n}>
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-        <FlameGraphRenderer
-          {...(restProps as InnerFlamegraphRendererProps)}
-          {...overrideProps}
-        />
+    <pyro-flamegraph className={themeClass}>
+      <FlamegraphI18nProvider messages={messages}>
+        <FlameGraphRenderer {...overrideProps}enableSandwichView={sandwich} {...rest} />
       </FlamegraphI18nProvider>
     </pyro-flamegraph>
   );
 };
+
+export { FlamegraphRenderer };

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/SharedQueryInput.module.scss

@@ -1,8 +1,11 @@
+/* src/SharedQueryInput.module.scss */
+
 .wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
-  flex-grow: 1;
+  /* 移除 flex-grow: 1，让宽度由父组件控制 */
+  width: 100%;
 }
 
 .search {
@@ -12,7 +15,7 @@
   margin-right: 1.5px;
   border: 1px solid var(--ps-ui-border);
   display: flex;
-  flex-grow: 1;
+  /* 移除 flex-grow: 1 */
   height: 37px;
   width: 100%;
 

package/src/Toolbar.module.scss

@@ -13,6 +13,19 @@ $buttonHeight: 37px;
   align-items: center;
 }
 
+// 搜索框包裹器 - 固定宽度 360px
+.searchWrapper {
+  width: 360px;
+  flex-shrink: 0;
+}
+
+// 右侧区域：色带下拉 + 工具按钮
+.rightSection {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .viewType {
   display: flex;
   flex-direction: row;

package/src/Toolbar.tsx

@@ -25,6 +25,8 @@ import { FitModes } from './fitMode/fitMode';
 import SharedQueryInput from './SharedQueryInput';
 import type { ViewTypes } from './FlameGraph/FlameGraphComponent/viewTypes';
 import type { FlamegraphRendererProps } from './FlameGraph/FlameGraphRenderer';
+import { FlamegraphPalette } from './FlameGraph/FlameGraphComponent/colorPalette';
+import { DiffLegendPaletteDropdown } from './FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown';
 import {
   TableIcon,
   TablePlusFlamegraphIcon,
@@ -43,7 +45,7 @@ import {
 const cx = classNames.bind(styles);
 
 const DIVIDER_WIDTH = 5;
-const QUERY_INPUT_WIDTH = 175;
+const QUERY_INPUT_WIDTH = 360;
 const LEFT_MARGIN = 2;
 const RIGHT_MARGIN = 2;
 const TOOLBAR_SQUARE_WIDTH = 40 + LEFT_MARGIN + RIGHT_MARGIN;
@@ -135,6 +137,10 @@ export interface ProfileHeaderProps {
   selectedNode: Maybe<{ i: number; j: number }>;
   onFocusOnSubtree: (i: number, j: number) => void;
   sharedQuery?: FlamegraphRendererProps['sharedQuery'];
+
+  // 用于 diff 模式的调色板
+  palette?: FlamegraphPalette;
+  setPalette?: (p: FlamegraphPalette) => void;
 }
 
 const Divider = () => <div className={styles.divider} />;
@@ -160,10 +166,15 @@ const Toolbar = memo(
     enableChangingDisplay = true,
     sharedQuery,
     ExportData,
+    palette,
+    setPalette,
   }: ProfileHeaderProps) => {
     const toolbarRef = useRef<HTMLDivElement>(null);
     const i18n = useFlamegraphI18n();
 
+    // 是否显示调色板选择器（仅在 diff 模式且有 palette 时显示）
+    const showPaletteDropdown = flamegraphType === 'double' && palette && setPalette;
+
     const fitModeItem = {
       el: (
         <>
@@ -247,7 +258,8 @@ const Toolbar = memo(
     return (
       <div role="toolbar" ref={toolbarRef}>
         <div className={styles.navbar}>
-          <div>
+          {/* 左侧：搜索框 */}
+          <div className={styles.searchWrapper}>
             <SharedQueryInput
               width={QUERY_INPUT_WIDTH}
               onHighlightChange={handleSearchChange}
@@ -255,7 +267,20 @@ const Toolbar = memo(
               sharedQuery={sharedQuery}
             />
           </div>
-          <div>
+
+          {/* 右侧：色带下拉 + 工具按钮 */}
+          <div className={styles.rightSection}>
+            {/* diff 模式下显示调色板选择器 */}
+            {showPaletteDropdown && (
+              <>
+                <DiffLegendPaletteDropdown
+                  palette={palette}
+                  onChange={setPalette}
+                />
+                <Divider />
+              </>
+            )}
+
             <div className={styles.itemsContainer}>
               {toolbarFilteredItems.visible.map((v, i) => (
                 // eslint-disable-next-line react/no-array-index-key
@@ -278,6 +303,7 @@ const Toolbar = memo(
               )}
             </div>
           </div>
+
           {!isCollapsed && (
             <div className={styles.navbarCollapsedItems}>
               {toolbarFilteredItems.hidden.map((v, i) => (

package/src/i18n.tsx

@@ -60,6 +60,9 @@ export type FlamegraphMessages = {
   diffLegendSelectPalette: string;
   paletteDefaultName: string;
   paletteColorBlindName: string;
+  // 调色板补充描述（出现在下拉菜单里）
+  paletteDefaultDesc: string;
+  paletteColorBlindDesc: string;
 
   // 搜索框 & 多视图搜索联动
   searchPlaceholder: string;
@@ -206,11 +209,14 @@ export const defaultMessages: FlamegraphMessages = {
   diffLegendSelectPalette: 'Select a palette',
   paletteDefaultName: 'Default',
   paletteColorBlindName: 'Color Blind',
+  // 调色板补充描述（英文）
+  paletteDefaultDesc: '(green to red)',
+  paletteColorBlindDesc: '(blue to red)',
 
   // 搜索框 & 多视图搜索联动
   searchPlaceholder: 'Search...',
   syncSearchBars: 'Sync Search Bars',
-  unsyncSearchBars: 'Unsync Search Bars'
+  unsyncSearchBars: 'Unsync Search Bars',
 };
 
 export const zhCNMessages: FlamegraphMessages = {
@@ -257,11 +263,14 @@ export const zhCNMessages: FlamegraphMessages = {
   diffLegendSelectPalette: '选择颜色方案',
   paletteDefaultName: '默认',
   paletteColorBlindName: '色盲模式',
+  // 调色板补充描述（中文）
+  paletteDefaultDesc: '(绿色 → 红色)',
+  paletteColorBlindDesc: '(蓝色 → 红色)',
 
   // 搜索框 & 多视图搜索联动
   searchPlaceholder: '搜索...',
   syncSearchBars: '同步搜索栏',
-  unsyncSearchBars: '取消同步搜索栏'
+  unsyncSearchBars: '取消同步搜索栏',
 };
 
 const I18nContext = createContext<FlamegraphMessages>(defaultMessages);

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);
   }