refactor: 趋势表tooltip类名不再使用css-modules (#1501)

* refactor: 趋势表tooltip类名不再使用css-modules

* refactor: 统一css类名前缀变量到shared

packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-col-tooltip.tsx

@@ -1,8 +1,9 @@
 import cls from 'classnames';
 import React from 'react';
+import { getStrategySheetTooltipClsName as tooltipCls } from '@antv/s2-shared';
 import type { CustomTooltipProps } from './interface';
 
-import styles from './index.module.less';
+import './index.less';
 
 export const ColTooltip: React.FC<CustomTooltipProps> = ({ cell }) => {
   const meta = cell.getMeta();
@@ -15,9 +16,9 @@ export const ColTooltip: React.FC<CustomTooltipProps> = ({ cell }) => {
   const cellName = meta.spreadsheet.dataSet.getFieldName(meta.field);
 
   return (
-    <div className={cls(styles.strategySheetTooltip, styles.col)}>
-      <span className={styles.name}>{cellName}</span>
-      <span className={styles.col}>{meta.value}</span>
+    <div className={cls(tooltipCls(), tooltipCls('col'))}>
+      <span className={tooltipCls('name')}>{cellName}</span>
+      <span className={tooltipCls('value')}>{meta.value}</span>
     </div>
   );
 };

packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-data-tooltip.tsx

@@ -8,10 +8,11 @@ import {
 import cls from 'classnames';
 import { first, get, isEmpty, isNil } from 'lodash';
 import React from 'react';
+import { getStrategySheetTooltipClsName as tooltipCls } from '@antv/s2-shared';
 import { getLeafColNode, getRowName } from '../utils';
 import type { CustomTooltipProps } from './interface';
 
-import styles from './index.module.less';
+import './index.less';
 
 export const DataTooltip: React.FC<CustomTooltipProps> = ({ cell }) => {
   const meta = cell.getMeta() as ViewMeta;
@@ -38,38 +39,40 @@ export const DataTooltip: React.FC<CustomTooltipProps> = ({ cell }) => {
   const originalValue = get(metaFieldValue, valuesCfg?.originalValueField);
 
   return (
-    <div className={cls(styles.strategySheetTooltip, styles.data)}>
-      <div className={styles.header}>
-        <span className={styles.label}>{rowName}</span>
+    <div className={cls(tooltipCls(), tooltipCls('data'))}>
+      <div className={tooltipCls('header')}>
+        <span className={'header-label'}>{rowName}</span>
         <span>{value ?? emptyPlaceholder}</span>
       </div>
-      <div className={styles.originalValue}>
+      <div className={tooltipCls('original-value')}>
         {isNil(originalValue?.[0]?.[0])
           ? emptyPlaceholder
           : originalValue?.[0]?.[0]}
       </div>
       {!isEmpty(derivedValues) && (
         <>
-          <div className={styles.divider} />
-          <ul className={styles.derivedValues}>
+          <div className={tooltipCls('divider')} />
+          <ul className={tooltipCls('derived-values')}>
             {derivedValues.map((derivedValue, i) => {
               const isNormal = isNil(derivedValue);
               const isUp = isUpDataValue(derivedValue as string);
               const isDown = !isNormal && !isUp;
 
               return (
-                <li className={styles.value} key={i}>
-                  <span className={styles.derivedValueLabel}>
+                <li className="derived-value-item" key={i}>
+                  <span className="derived-value-label">
                     {derivedLabels[i]}
                   </span>
                   <span
-                    className={cls(styles.derivedValueGroup, {
-                      [styles.up]: isUp,
-                      [styles.down]: isDown,
+                    className={cls('derived-value-group', {
+                      ['derived-value-trend-up']: isUp,
+                      ['derived-value-trend-down']: isDown,
                     })}
                   >
-                    {!isNormal && <span className={styles.icon}></span>}
-                    <span className={styles.value}>
+                    {!isNormal && (
+                      <span className="derived-value-trend-icon"></span>
+                    )}
+                    <span className="derived-value-content">
                       {derivedValue ?? emptyPlaceholder}
                     </span>
                   </span>

packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/custom-row-tooltip.tsx

@@ -1,9 +1,10 @@
 import { i18n, Node } from '@antv/s2';
 import cls from 'classnames';
 import React from 'react';
+import { getStrategySheetTooltipClsName as tooltipCls } from '@antv/s2-shared';
 import type { CustomTooltipProps } from './interface';
 
-import styles from './index.module.less';
+import './index.less';
 
 export const RowTooltip: React.FC<CustomTooltipProps> = ({ cell }) => {
   const { field, spreadsheet, value, extra } = cell.getMeta() as Node;
@@ -12,8 +13,8 @@ export const RowTooltip: React.FC<CustomTooltipProps> = ({ cell }) => {
     spreadsheet.dataSet.getFieldDescription(field) || extra?.description;
 
   return (
-    <div className={cls(styles.strategySheetTooltip, styles.row)}>
-      <div className={styles.value}>{value}</div>
+    <div className={cls(tooltipCls(), tooltipCls('row'))}>
+      <div className={tooltipCls('value')}>{value}</div>
       {description && (
         <div>
           {i18n('说明')}: {description}

packages/s2-react/src/components/sheets/strategy-sheet/custom-tooltip/index.less

@@ -0,0 +1,159 @@
+@import '@antv/s2-shared/src/styles/variables.less';
+
+.@{strategySheetTooltipClsPrefix} {
+  line-height: 20px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.65);
+  overflow: hidden;
+  padding: 12px;
+
+  ul,
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  & &-divider {
+    border-top: 1px solid #e9e9e9;
+    margin: 10px -12px;
+  }
+
+  // tooltip for row cell
+  // ------------------------------------------------------
+  &&-row &-value {
+    font-weight: 700;
+  }
+
+  // tooltip for col cell
+  // ------------------------------------------------------
+  &&-col &-name {
+    margin-right: 20px;
+  }
+
+  &&-col &-value {
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  // tooltip for normal data cell
+  // ------------------------------------------------------
+  &&-data &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-label {
+      font-weight: 700;
+    }
+  }
+
+  &&-data &-original-value {
+    text-align: right;
+  }
+
+  &&-data &-derived-values {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    li.derived-value-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .derived-value-group {
+        color: rgba(0, 0, 0, 0.65);
+
+        .derived-value-trend-icon {
+          display: inline-block;
+          width: 0;
+          height: 0;
+          margin-right: 4px;
+          border-right: 4px solid transparent;
+          border-bottom: 9px solid #000;
+          border-left: 4px solid transparent;
+          transform: rotate(0deg);
+        }
+
+        &.derived-value-trend-up {
+          color: #f46649;
+
+          .derived-value-trend-icon {
+            border-bottom-color: #f46649;
+          }
+        }
+
+        &.derived-value-trend-down {
+          color: #2aa491;
+
+          .derived-value-trend-icon {
+            transform: rotate(180deg);
+            border-bottom-color: #2aa491;
+          }
+        }
+      }
+    }
+  }
+
+  // tooltip for bullet data cell
+  // ------------------------------------------------------
+  &-bullet {
+    // 让描述一行显示
+    max-width: max-content;
+  }
+
+  &-bullet &-title {
+    font-weight: 500;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 22px;
+    margin-bottom: 10px;
+  }
+
+  &-bullet &-desc {
+    color: rgba(0, 0, 0, 0.45);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-weight: 400;
+    white-space: pre-wrap;
+
+    > li + li {
+      margin-top: 6px;
+    }
+  }
+
+  &-bullet .tooltip-bullet-item {
+    color: rgba(0, 0, 0, 0.45);
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 400;
+    font-size: 12px;
+
+    &:last-child {
+      margin-top: 2px;
+    }
+
+    &-value {
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    &.bullet-current-item .bullet-item-legend {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      margin-right: 8px;
+    }
+
+    &.bullet-target-item .bullet-item-legend {
+      display: inline-block;
+      width: 1px;
+      height: 12px;
+      border-left: 1px solid rgba(0, 0, 0, 0.25);
+      margin: 0 12px 0 4px;
+    }
+  }
+}