From b76da550851fb00bb9b9d5bfff79f812d58ed569 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sun, 28 Sep 2025 03:35:29 +0800
Subject: [PATCH] perf: uninstall classnames, install clsx

---
 .gitignore                    |  1 +
 package.json                  |  7 ++++---
 src/Mask.tsx                  | 15 +++++----------
 src/Tour.tsx                  |  7 +++----
 src/TourStep/DefaultPanel.tsx | 19 ++++++++-----------
 5 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/.gitignore b/.gitignore
index 136c498..8ddb9d8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ coverage
 yarn.lock
 /es/
 package-lock.json
+pnpm-lock.yaml
 .doc
 
 # umi
diff --git a/package.json b/package.json
index 79cbb80..968177c 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@rc-component/portal": "^2.0.0",
     "@rc-component/trigger": "^3.0.0",
     "@rc-component/util": "^1.3.0",
-    "classnames": "^2.3.2"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.3",
@@ -51,6 +51,8 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^15.0.0",
     "@types/jest": "^29.0.0",
+    "@types/minimatch": "^5.1.2",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/fabric": "^2.5.2",
@@ -63,8 +65,7 @@
     "rc-test": "^7.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.0.0",
-    "@types/minimatch": "^5.1.2"
+    "typescript": "^5.0.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
diff --git a/src/Mask.tsx b/src/Mask.tsx
index f157996..a6c8199 100644
--- a/src/Mask.tsx
+++ b/src/Mask.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import Portal from '@rc-component/portal';
 import type { PosInfo } from './hooks/useTarget';
 import useId from '@rc-component/util/lib/hooks/useId';
 import type { SemanticName, TourProps } from './interface';
 
-const COVER_PROPS = {
+const COVER_PROPS: React.SVGAttributes<SVGRectElement> = {
   fill: 'transparent',
   pointerEvents: 'auto',
 };
@@ -27,7 +27,7 @@ export interface MaskProps {
   getPopupContainer?: TourProps['getPopupContainer'];
 }
 
-const Mask = (props: MaskProps) => {
+const Mask: React.FC<MaskProps> = props => {
   const {
     prefixCls,
     rootClassName,
@@ -65,7 +65,7 @@ const Mask = (props: MaskProps) => {
       getContainer={getPopupContainer as any}
     >
       <div
-        className={classNames(
+        className={clsx(
           `${prefixCls}-mask`,
           rootClassName,
           tourClassNames?.mask,
@@ -83,12 +83,7 @@ const Mask = (props: MaskProps) => {
         }}
       >
         {showMask ? (
-          <svg
-            style={{
-              width: '100%',
-              height: '100%',
-            }}
-          >
+          <svg style={{ width: '100%', height: '100%' }}>
             <defs>
               <mask id={maskId}>
                 <rect x="0" y="0" {...maskRectSize} fill="white" />
diff --git a/src/Tour.tsx b/src/Tour.tsx
index 32c66c2..7c4afeb 100644
--- a/src/Tour.tsx
+++ b/src/Tour.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 
-import Portal from '@rc-component/portal';
 import type { TriggerRef } from '@rc-component/trigger';
 import Trigger from '@rc-component/trigger';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
 import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
@@ -231,7 +230,7 @@ const Tour: React.FC<TourProps> = props => {
         popupStyle={stepStyle}
         popupPlacement={mergedPlacement}
         popupVisible={mergedOpen}
-        popupClassName={classNames(rootClassName, stepClassName)}
+        popupClassName={clsx(rootClassName, stepClassName)}
         prefixCls={prefixCls}
         popup={getPopupElement}
         forceRender={false}
@@ -245,7 +244,7 @@ const Tour: React.FC<TourProps> = props => {
           getContainer={getPopupContainer as any}
           domRef={placeholderRef}
           fallbackDOM={fallbackDOM}
-          className={classNames(
+          className={clsx(
             className,
             rootClassName,
             `${prefixCls}-target-placeholder`,
diff --git a/src/TourStep/DefaultPanel.tsx b/src/TourStep/DefaultPanel.tsx
index 3eb01a4..0a42b3e 100644
--- a/src/TourStep/DefaultPanel.tsx
+++ b/src/TourStep/DefaultPanel.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { TourStepProps } from '../interface';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
 
 export type DefaultPanelProps = Exclude<TourStepProps, 'closable'> & {
@@ -30,9 +30,9 @@ export default function DefaultPanel(props: DefaultPanelProps) {
   const mergedClosable = !!closable;
 
   return (
-    <div className={classNames(`${prefixCls}-pannel`, className)}>
+    <div className={clsx(`${prefixCls}-pannel`, className)}>
       <div
-        className={classNames(`${prefixCls}-section`, tourClassNames?.section)}
+        className={clsx(`${prefixCls}-section`, tourClassNames?.section)}
         style={styles?.section}
       >
         {mergedClosable && (
@@ -47,18 +47,18 @@ export default function DefaultPanel(props: DefaultPanelProps) {
           </button>
         )}
         <div
-          className={classNames(`${prefixCls}-header`, tourClassNames?.header)}
+          className={clsx(`${prefixCls}-header`, tourClassNames?.header)}
           style={styles?.header}
         >
           <div
-            className={classNames(`${prefixCls}-title`, tourClassNames?.title)}
+            className={clsx(`${prefixCls}-title`, tourClassNames?.title)}
             style={styles?.title}
           >
             {title}
           </div>
         </div>
         <div
-          className={classNames(
+          className={clsx(
             `${prefixCls}-description`,
             tourClassNames?.description,
           )}
@@ -67,7 +67,7 @@ export default function DefaultPanel(props: DefaultPanelProps) {
           {description}
         </div>
         <div
-          className={classNames(`${prefixCls}-footer`, tourClassNames?.footer)}
+          className={clsx(`${prefixCls}-footer`, tourClassNames?.footer)}
           style={styles?.footer}
         >
           <div className={`${prefixCls}-sliders`}>
@@ -83,10 +83,7 @@ export default function DefaultPanel(props: DefaultPanelProps) {
               : null}
           </div>
           <div
-            className={classNames(
-              `${prefixCls}-actions`,
-              tourClassNames?.actions,
-            )}
+            className={clsx(`${prefixCls}-actions`, tourClassNames?.actions)}
             style={styles?.actions}
           >
             {current !== 0 ? (