@kylincloud/flamegraph 0.35.7 → 0.35.9

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