@kylincloud/flamegraph 0.35.27 → 0.35.28

package/dist/shims/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAoB,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUrF,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;CACvH;AAED,MAAM,WAAW,IAAK,SAAQ,UAAU;IACtC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,UAAU;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GACrB;IACA,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACC;IACA,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEJ,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,KAAK,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,YAAa,QAAQ,EAAE,KAAG,cAsBlD,CAAC;AAEF,UAAU,UAAU;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0CD,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,UAAU,2CAkEZ;AA2DD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAoB,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUrF,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;CACvH;AAED,MAAM,WAAW,IAAK,SAAQ,UAAU;IACtC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,UAAU;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GACrB;IACA,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACC;IACA,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEJ,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,KAAK,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,YAAa,QAAQ,EAAE,KAAG,cAsBlD,CAAC;AAEF,UAAU,UAAU;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0CD,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,UAAU,2CAuEZ;AA2DD,eAAe,KAAK,CAAC"}

package/dist/shims/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/shims/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AA2BD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAe1C,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/shims/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AA2BD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0C1C,CAAA"}

package/package.json

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

package/src/FlameGraph/FlameGraphComponent/DiffLegend.module.css

@@ -1,7 +1,11 @@
 .flamegraph-legend {
   display: flex;
   align-items: center;
-  font-size: 11px;
+  font-size: var(--legend-font-size, 11px);
+  line-height: var(--legend-line-height, 1);
+  --legend-item-width: 37px;
+  --legend-item-padding: 0;
+  --legend-item-height: auto;
   justify-content: center;
 }
 
@@ -11,7 +15,9 @@
 }
 
 .flamegraph-legend-item {
-  width: 37px;
+  width: var(--legend-item-width, 37px);
+  height: var(--legend-item-height, auto);
+  padding: var(--legend-item-padding, 0);
   text-align: center;
 
   /* if for some reason the contents can't fit 

package/src/FlameGraph/FlameGraphComponent/DiffLegend.tsx

@@ -14,11 +14,22 @@ export default function DiffLegend(props: DiffLegendProps) {
   const values = decideLegend(showMode);
 
   const color = NewDiffColor(palette);
+  const compactLegendStyle =
+    showMode === 'small'
+      ? ({
+          '--legend-item-width': '32px',
+          '--legend-item-padding': '2px 2px',
+          '--legend-font-size': '10px',
+          '--legend-line-height': '1.1',
+          '--legend-item-height': '16px',
+        } as React.CSSProperties)
+      : undefined;
 
   return (
     <div
       data-testid="flamegraph-legend"
       className={`${styles['flamegraph-legend']} ${styles['flamegraph-legend-list']}`}
+      style={compactLegendStyle}
     >
       {values.map((v) => (
         <div
@@ -43,7 +54,7 @@ function decideLegend(showMode: sizeMode) {
     }
 
     case 'small': {
-      return [-100, -40, -20, 0, 20, 40, 100];
+      return [-100, -50, 0, 50, 100];
     }
 
     default:

package/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.module.css

@@ -10,38 +10,116 @@
 .triggerButton {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
+  gap: 4px;
+  padding: 2px 16px 2px 6px;
   border: 1px solid var(--ps-ui-border);
   border-radius: 4px;
-  background-color: var(--ps-immutable-off-white);
+  background-color: transparent;
   cursor: pointer;
-  height: 37px;
+  height: 32px;
+  margin-right: 0;
 }
 
 .triggerButton:hover {
-  background-color: var(--ps-ui-element-bg-highlight);
+  background-color: transparent;
+  border-color: #6aa27d;
+}
+
+.triggerButton:focus-visible,
+.triggerButton[aria-expanded='true'] {
+  border-color: #3c7150;
+  box-shadow: 0 0 0 3px rgba(60, 113, 80, 0.22);
+}
+
+.triggerButton::after {
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  font-size: 10px;
 }
 
 .dropdownArrow {
   font-size: 8px;
   color: var(--ps-text-secondary);
-  margin-left: 4px;
+  margin-left: 2px;
 }
 
 /* 菜单项样式 */
 .menuItem {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 200px;
-  padding: 4px 0;
+  justify-content: flex-start;
+  gap: 6px;
+  min-width: 148px;
+  padding: 4px 8px;
 }
 
 .menuItemText {
   color: var(--ps-text-primary);
   font-size: 13px;
+  line-height: 1.2;
+}
+
+.dropdownMenu :global(.szh-menu__header) {
+  padding: 6px 12px 4px;
+  color: #8a8f99;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+}
+
+.dropdownMenu :global(.szh-menu) {
+  margin-top: 4px;
+  transform-origin: top center;
+  animation: dropdownZoomIn 0.18s ease-out;
+}
+
+.menuItemWrapper {
+  background-color: transparent !important;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  margin: 2px 6px;
+  padding: 0;
+}
+
+.menuItemSelected {
+  background-color: rgba(93, 151, 111, 0.38) !important;
+  border-color: transparent;
+}
+
+.menuItemSelected .menuItemText {
+  font-weight: 600;
+}
+
+.menuItemWrapper:global(.szh-menu__item--hover),
+.menuItemWrapper:global(.szh-menu__item--focus),
+.menuItemWrapper:global(.szh-menu__item--active) {
+  background-color: #f5f5f5 !important;
+  border-color: transparent;
+}
+
+.menuItemSelected:global(.szh-menu__item--hover),
+.menuItemSelected:global(.szh-menu__item--focus),
+.menuItemSelected:global(.szh-menu__item--active) {
+  background-color: rgba(93, 151, 111, 0.38) !important;
+  border-color: transparent;
+}
+
+@keyframes dropdownZoomIn {
+  from {
+    opacity: 0;
+    transform: scaleY(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dropdownMenu :global(.szh-menu) {
+    animation: none;
+  }
 }
 
 /* ========== 以下为旧样式，保留兼容性 ========== */
@@ -86,3 +164,8 @@
   height: 16px;
   flex-shrink: 0;
 }
+
+:global([data-theme='kylin']) .triggerButton {
+  height: 28px;
+  padding: 1px 14px 1px 6px;
+}

package/src/FlameGraph/FlameGraphComponent/DiffLegendPaletteDropdown.tsx

@@ -8,7 +8,6 @@ import {
   FlamegraphPalette,
 } from './colorPalette';
 import DiffLegend from './DiffLegend';
-import CheckIcon from './CheckIcon';
 // 在把通用 UI 抽成独立包之前，临时复用 shims 目录下的 Dropdown 封装
 // eslint-disable-next-line
 import Dropdown, { MenuItem, MenuButton } from '../../shims/Dropdown';
@@ -62,6 +61,7 @@ export const DiffLegendPaletteDropdown = (
         // 下拉菜单的无障碍 label 文案（i18n）
         label={messages.diffLegendSelectPalette}
         align="end"
+        className={styles.dropdownMenu}
         menuButton={
           <MenuButton
             className={cx(
@@ -82,13 +82,18 @@ export const DiffLegendPaletteDropdown = (
         }}
       >
         {paletteList.map((p) => (
-          <MenuItem key={p.name} value={p}>
+          <MenuItem
+            key={p.name}
+            value={p}
+            className={cx(
+              styles.menuItemWrapper,
+              p.name === palette.name && styles.menuItemSelected
+            )}
+          >
             <div className={styles.menuItem}>
               <span className={styles.menuItemText}>
                 {getPaletteName(p)} {getPaletteColorDesc(p)}
               </span>
-              {/* 当前选中的调色板右侧展示对勾图标 */}
-              {p.name === palette.name && <CheckIcon />}
             </div>
           </MenuItem>
         ))}

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -418,67 +418,69 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         'vertical-orientation': flamebearer.format === 'double',
       })}
     >
-      {breadcrumb && (
-        <FlamegraphBreadcrumb
-          totalValueText={breadcrumb.totalValueText}
-          totalSamplesText={breadcrumb.totalSamplesText}
-          samplesLabel={breadcrumb.samplesLabel}
-          unitLabel={breadcrumb.unitLabel}
-          hasFocus={breadcrumb.hasFocus}
-          focusPercent={breadcrumb.focusPercent}
-          focusLabel={breadcrumb.focusLabel}
-          ofTotalPlacement={breadcrumb.ofTotalPlacement}
-          ofTotalLabel={breadcrumb.ofTotalLabel}
-          clearFocusLabel={breadcrumb.clearFocusLabel}
-          onClearFocus={breadcrumb.onClearFocus}
-        />
-      )}
-      {/* Header 已简化，仅在 single 模式下显示标题 */}
-      {/* DiffLegend 已移到 Toolbar */}
-      {headerVisible && (
-        <Header
-          format={flamebearer.format}
-          units={flamebearer.units}
-          toolbarVisible={toolbarVisible}
-        />
-      )}
-      <div
-        data-testid={dataTestId}
-        style={{
-          position: 'relative',
-          opacity: dataUnavailable && !showSingleLevel ? 0 : 1,
-        }}
-      >
-        <canvas
-          height="0"
-          data-testid="flamegraph-canvas"
-          data-highlightquery={highlightQuery}
-          className={clsx('flamegraph-canvas', styles.canvas)}
-          ref={canvasRef}
-          onClick={!disableClick ? onClick : undefined}
-        />
-        <canvas
-          height="0"
-          data-testid="flamegraph-text-canvas"
-          className={clsx('flamegraph-text-canvas', styles.textCanvas)}
-          ref={textCanvasRef}
-        />
-        {flamegraph && canvasRef && (
-          <Highlight
-            barHeight={PX_PER_LEVEL}
-            canvasRef={canvasRef}
-            zoom={zoom}
-            xyToHighlightData={xyToHighlightData}
+      <div className={indexStyles.flamegraphFrame}>
+        {breadcrumb && (
+          <FlamegraphBreadcrumb
+            totalValueText={breadcrumb.totalValueText}
+            totalSamplesText={breadcrumb.totalSamplesText}
+            samplesLabel={breadcrumb.samplesLabel}
+            unitLabel={breadcrumb.unitLabel}
+            hasFocus={breadcrumb.hasFocus}
+            focusPercent={breadcrumb.focusPercent}
+            focusLabel={breadcrumb.focusLabel}
+            ofTotalPlacement={breadcrumb.ofTotalPlacement}
+            ofTotalLabel={breadcrumb.ofTotalLabel}
+            clearFocusLabel={breadcrumb.clearFocusLabel}
+            onClearFocus={breadcrumb.onClearFocus}
           />
         )}
-        {flamegraph && (
-          <ContextMenuHighlight
-            barHeight={PX_PER_LEVEL}
-            node={rightClickedNode}
+        {/* Header 已简化，仅在 single 模式下显示标题 */}
+        {/* DiffLegend 已移到 Toolbar */}
+        {headerVisible && (
+          <Header
+            format={flamebearer.format}
+            units={flamebearer.units}
+            toolbarVisible={toolbarVisible}
           />
         )}
+        <div
+          data-testid={dataTestId}
+          style={{
+            position: 'relative',
+            opacity: dataUnavailable && !showSingleLevel ? 0 : 1,
+          }}
+        >
+          <canvas
+            height="0"
+            data-testid="flamegraph-canvas"
+            data-highlightquery={highlightQuery}
+            className={clsx('flamegraph-canvas', styles.canvas)}
+            ref={canvasRef}
+            onClick={!disableClick ? onClick : undefined}
+          />
+          <canvas
+            height="0"
+            data-testid="flamegraph-text-canvas"
+            className={clsx('flamegraph-text-canvas', styles.textCanvas)}
+            ref={textCanvasRef}
+          />
+          {flamegraph && canvasRef && (
+            <Highlight
+              barHeight={PX_PER_LEVEL}
+              canvasRef={canvasRef}
+              zoom={zoom}
+              xyToHighlightData={xyToHighlightData}
+            />
+          )}
+          {flamegraph && (
+            <ContextMenuHighlight
+              barHeight={PX_PER_LEVEL}
+              node={rightClickedNode}
+            />
+          )}
+        </div>
+        {showCredit ? <LogoLink /> : ''}
       </div>
-      {showCredit ? <LogoLink /> : ''}
       {flamegraph && (
         <FlamegraphTooltip
           format={flamebearer.format}

package/src/FlameGraph/FlameGraphComponent/styles.module.scss

@@ -8,3 +8,11 @@
     margin-right: 10px;
   }
 }
+
+.flamegraphFrame {
+  border: 1px solid var(--ps-ui-border);
+  border-radius: 6px;
+  padding: 6px 8px 8px;
+  background-color: transparent;
+  min-height: var(--kylin-flamegraph-pane-min-height, 320px);
+}

package/src/Icons.tsx

@@ -2,27 +2,36 @@ import React from 'react';
 
 export const TableIcon = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-      <g id="z9nPJj.tif">
-        <path d="M62,13.33V49.68c-.02,.05-.04,.11-.05,.16-.3,2.66-2.66,5.16-6.08,5.15-15.92,0-31.83,0-47.75-.01-.54,0-1.1-.06-1.62-.19-2.73-.69-4.52-3.09-4.52-5.88,0-12,.01-23.56,.01-34.9,0-.29,.01-.57,.05-.86,.35-2.3,1.62-3.91,3.84-4.75,.6-.23,1.27-.28,1.9-.41,16.13,0,32.27,0,48.4,0,.09,.01,.17,.04,.26,.04,2.66,.21,4.8,2.01,5.4,4.57,.06,.24,.1,.48,.14,.72ZM28.99,31.81c0-3.92-.01-7.91-.01-11.81H8c0,3.91,.01,7.9,.01,11.81H28.99Zm27,0c0-3.92-.01-7.92-.01-11.81h-20.97c0,3.92,.01,7.91,.01,11.81h20.97Zm-47.98,5.19c0,3.7,0,8,0,11.69v.31H29v-12m6.01,.04c0,3.93-.01,8.05-.01,11.96h20.99c0-.12,0-.22,0-.31,0-3.7,0-7.99,0-11.69" />
-      </g>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="64 64 896 896"
+      fill="currentColor"
+    >
+      <path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 208H676V232h212v136zm0 224H676V432h212v160zM412 432h200v160H412V432zm200-64H412V232h200v136zm-476 64h212v160H136V432zm0-200h212v136H136V232zm0 424h212v136H136V656zm276 0h200v136H412V656zm476 136H676V656h212v136z" />
     </svg>
   );
 };
 
 export const TablePlusFlamegraphIcon = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-      <path d="M31,8.04H7.62c-.61,.13-1.26,.18-1.84,.41-2.14,.84-3.37,2.45-3.71,4.75-.04,.28-.05,.57-.05,.86,0,11.32-.02,22.88-.01,34.87,0,2.79,1.73,5.18,4.37,5.88,.51,.13,1.04,.19,1.57,.19,7.69,0,15.38,0,23.07,0V8.04Zm-2.92,11.99c0,3.9,.01,7.89,.01,11.8H7.82c0-3.9-.01-7.89-.01-11.8H28.08ZM7.82,49.01v-.31c0-3.69,0-7.99,0-11.68H28.1v11.99H7.82Z" />
-      <path d="M58.67,7.9h-25.67V55h2.9c1.84,0,2.9-1.55,2.9-3.45V27.14h11.6v6.37c0,1.91,1.49,3.45,3.33,3.45h4.94c1.84,0,3.33-1.55,3.33-3.45V11.35c0-1.91-1.49-3.45-3.33-3.45Z" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="64 64 896 896"
+      fill="currentColor"
+    >
+      <path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z" />
     </svg>
   );
 };
 
 export const FlamegraphIcon = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-      <path d="M5.44,8H58.56c1.9,0,3.44,1.54,3.44,3.44v6.16s0,9.6,0,9.6v6.36c0,1.9-1.54,3.44-3.44,3.44h-5.11c-1.9,0-3.44-1.54-3.44-3.44v-6.36h-12s0,9.8,0,9.8v9s0,5.56,0,5.56c0,1.9-1.1,3.44-3,3.44h-6c-1.9,0-3-1.54-3-3.44v-5.56h-9c-1.99,0-3-1.52-3-3.4v-5.6H5.44c-1.9,0-3.44-1.74-3.44-3.64v-6.16s0-9.6,0-9.6v-6.16c0-1.9,1.54-3.44,3.44-3.44Z" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="64 64 896 896"
+      fill="currentColor"
+    >
+      <path d="M834.1 469.2A347.49 347.49 0 00751.2 354l-29.1-26.7a8.09 8.09 0 00-13 3.3l-13 37.3c-8.1 23.4-23 47.3-44.1 70.8-1.4 1.5-3 1.9-4.1 2-1.1.1-2.8-.1-4.3-1.5-1.4-1.2-2.1-3-2-4.8 3.7-60.2-14.3-128.1-53.7-202C555.3 171 510 123.1 453.4 89.7l-41.3-24.3c-5.4-3.2-12.3 1-12 7.3l2.2 48c1.5 32.8-2.3 61.8-11.3 85.9-11 29.5-26.8 56.9-47 81.5a295.64 295.64 0 01-47.5 46.1 352.6 352.6 0 00-100.3 121.5A347.75 347.75 0 00160 610c0 47.2 9.3 92.9 27.7 136a349.4 349.4 0 0075.5 110.9c32.4 32 70 57.2 111.9 74.7C418.5 949.8 464.5 959 512 959s93.5-9.2 136.9-27.3A348.6 348.6 0 00760.8 857c32.4-32 57.8-69.4 75.5-110.9a344.2 344.2 0 0027.7-136c0-48.8-10-96.2-29.9-140.9zM713 808.5c-53.7 53.2-125 82.4-201 82.4s-147.3-29.2-201-82.4c-53.5-53.1-83-123.5-83-198.4 0-43.5 9.8-85.2 29.1-124 18.8-37.9 46.8-71.8 80.8-97.9a349.6 349.6 0 0058.6-56.8c25-30.5 44.6-64.5 58.2-101a240 240 0 0012.1-46.5c24.1 22.2 44.3 49 61.2 80.4 33.4 62.6 48.8 118.3 45.8 165.7a74.01 74.01 0 0024.4 59.8 73.36 73.36 0 0053.4 18.8c19.7-1 37.8-9.7 51-24.4 13.3-14.9 24.8-30.1 34.4-45.6 14 17.9 25.7 37.4 35 58.4 15.9 35.8 24 73.9 24 113.1 0 74.9-29.5 145.4-83 198.4z" />
     </svg>
   );
 };

package/src/SharedQueryInput.module.scss

@@ -134,3 +134,53 @@
   border-right-color: var(--ps-immutable-linked-border);
   border-bottom-color: var(--ps-immutable-linked-border);
 }
+
+.searchIcon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ps-toolbar-icon-color);
+  font-size: 12px;
+  pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  z-index: 2;
+}
+
+:global([data-theme='kylin']) {
+  .search {
+    height: 28px;
+    border-radius: 4px;
+    padding: 0 10px 0 28px;
+    font-size: 12px;
+    color: #262626;
+    background: #ffffff;
+    border-color: #d9d9d9;
+  }
+
+  .search::placeholder {
+    color: #8c8c8c;
+  }
+
+  .search:hover {
+    border-color: #3c7150;
+  }
+
+  .search:focus-visible,
+  .search:focus {
+    border-color: #3c7150;
+    box-shadow: 0 0 0 2px rgba(60, 113, 80, 0.2);
+  }
+
+  .searchIcon {
+    color: #8c8c8c;
+  }
+
+  .sync,
+  .syncSelected {
+    height: 28px;
+    width: 28px;
+    border-radius: 4px;
+  }
+}

package/src/SharedQueryInput.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable no-unused-expressions */
-import React, { useEffect, useMemo, ChangeEvent, useRef } from 'react';
+import React, { useEffect, useMemo, ChangeEvent, useRef, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
+import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import Input from './shims/Input';
 import { Tooltip } from './shims/Tooltip';
 import styles from './SharedQueryInput.module.scss';
@@ -33,6 +34,8 @@ const SharedQueryInput = ({
 }: SharedQueryProps) => {
   const messages = useFlamegraphI18n();
   const prevSyncEnabled = usePreviousSyncEnabled(sharedQuery?.syncEnabled);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [isKylin, setIsKylin] = useState(false);
 
   const onQueryChange = (e: ChangeEvent<HTMLInputElement>) => {
     onHighlightChange(e.target.value);
@@ -58,6 +61,15 @@ const SharedQueryInput = ({
     }
   }, [sharedQuery?.searchQuery, sharedQuery?.syncEnabled]);
 
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const kylinEl = el.closest(
+      "[data-theme='kylin'], [data-flamegraph-color-mode='kylin']"
+    );
+    setIsKylin(!!kylinEl);
+  }, []);
+
   const onToggleSync = () => {
     const newValue = sharedQuery?.syncEnabled ? false : sharedQuery?.id;
     sharedQuery?.toggleSync(newValue as string | false);
@@ -91,13 +103,16 @@ const SharedQueryInput = ({
     : messages.syncSearchBars;
 
   return (
-    <div className={styles.wrapper} style={{ width }}>
+    <div ref={wrapperRef} className={styles.wrapper} style={{ width }}>
+      <span className={styles.searchIcon}>
+        <FontAwesomeIcon icon={faSearch} />
+      </span>
       <Input
         testId="flamegraph-search"
         className={inputClassName}
         type="search"
         name="flamegraph-search"
-        placeholder={messages.searchPlaceholder}
+        placeholder={isKylin ? '搜索函数 / 过滤' : messages.searchPlaceholder}
         minLength={1}
         debounceTimeout={100}
         onChange={onQueryChange}

package/src/Toolbar.module.scss

@@ -128,3 +128,93 @@ $buttonHeight: 37px;
   padding: 4px;
   z-index: 1;
 }
+
+:global([data-theme='kylin']) {
+  .navbar {
+    height: 40px;
+    padding: 4px 0;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .searchWrapper {
+    width: 180px;
+  }
+
+  .navbar button {
+    color: #595959;
+  }
+
+  .toggleViewButton,
+  .fitModeButton,
+  .collapseNodeButton,
+  .resetViewButton {
+    height: 28px;
+    width: 28px;
+    border: 1px solid #d9d9d9;
+    background-color: #ffffff;
+    border-radius: 4px;
+  }
+
+  .toggleViewButton:hover,
+  .fitModeButton:hover,
+  .collapseNodeButton:hover,
+  .resetViewButton:hover {
+    border-color: #3c7150;
+    color: #3c7150;
+    background-color: #e6f4ea;
+  }
+
+  .collapseNodeButton,
+  .resetViewButton {
+    background-color: #fafafa;
+  }
+
+  .collapseNodeButton:disabled,
+  .resetViewButton:disabled {
+    color: #bfbfbf;
+    border-color: #d9d9d9;
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+  }
+
+  .toggleViewButton.selected,
+  .fitModeButton.selected {
+    background-color: #3c7150;
+    border-color: #3c7150;
+  }
+
+  .toggleViewButton.selected svg {
+    color: #ffffff;
+  }
+
+  .fitModeButton.selected svg {
+    color: #ffffff;
+  }
+
+  .toggleViewButton svg,
+  .fitModeButton svg,
+  .collapseNodeButton svg,
+  .resetViewButton svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .divider {
+    height: 28px;
+    background-color: #e5e5e5;
+  }
+
+  .moreButton {
+    height: 28px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    background-color: #ffffff;
+  }
+
+  .moreButton:hover {
+    border-color: #3c7150;
+    color: #3c7150;
+    background-color: #e6f4ea;
+  }
+}