fix: current user style error (#1049)

Reviewed-on: daoyoucloud/tachybase#1049

packages/core/client/src/user/CurrentUser.tsx

@@ -185,7 +185,7 @@ const useStyles = createStyles(({ css, token }) => {
       white-space: nowrap;
       text-overflow: ellipsis;
       cursor: pointer;
-      padding: '16px';
+      padding: 16px;
       color: ${token.colorTextHeaderMenu};
     `,
   };

packages/plugins/@hera/plugin-approval-mobile/package.json

@@ -10,7 +10,6 @@
     "antd": "5.16.1",
     "antd-mobile": "^5.35.0",
     "antd-mobile-icons": "^0.3.0",
-    "classnames": "^2.3.1",
     "lodash": "4.17.21",
     "react-i18next": "^11.15.1",
     "react-router-dom": "6.x"

packages/plugins/@hera/plugin-core/src/client/components/context-menu/animateComponent.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 const AnimateComponent = ({ children, isVisible, timeout, className }) => {

packages/plugins/@hera/plugin-core/src/client/components/context-menu/contextMenu.jsx

@@ -1,9 +1,11 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import cx from 'classnames';
 import ReactDOM from 'react-dom';
-import classnames from 'classnames';
+
-import { registerEvent, callHideEvent } from './registerEvent';
 import AnimateComponent from './animateComponent';
 import { throttle } from './helper';
+import { callHideEvent, registerEvent } from './registerEvent';
 
 function ContextMenu({
   children,
@@ -120,7 +122,7 @@ function ContextMenu({
 
   const ContextComponent = () => (
     <div
-      className={classnames('contextmenu', ...className.split(' '))}
+      className={cx('contextmenu', ...className.split(' '))}
       ref={contextMenuEl}
       onMouseLeave={handleMouseLeave}
       {...attributes}

packages/plugins/@hera/plugin-core/src/client/components/excel-table/Sheet.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
-import Spreadsheet from '../x-sheet';
 import { ClassNamesArg, css, cx } from '@tachybase/client';
 
+import Spreadsheet from '../x-sheet';
+
 export type SheetRef = {
   getData: () => any;
 };

packages/plugins/@hera/plugin-core/src/client/components/modal-full-screen/ModalFullScreen.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { ClassNamesArg, css, cx } from '@tachybase/client';
+
 import ReactDOM from 'react-dom';
-import { cx, css, ClassNamesArg } from '@tachybase/client';
+
 import { ModalHeader } from './ModalFullScreenChild';
 
 interface ModalFullScreenProps {

packages/plugins/@tachybase/plugin-data-source-manager/package.json

@@ -14,7 +14,6 @@
     "@tachybase/schema": "workspace:*",
     "ahooks": "^3.7.2",
     "antd": "5.16.1",
-    "classnames": "^2.3.1",
     "lodash": "4.17.21",
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.11.2",

packages/plugins/@tachybase/plugin-data-source-manager/src/client/component/CollectionsManager/components/CollectionName.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { useCollectionRecord } from '@tachybase/client';
+import { cx, useCollectionRecord } from '@tachybase/client';
 import { usePrefixCls } from '@tachybase/components';
 import { connect, mapProps, mapReadPretty } from '@tachybase/schema';
 
 import { LoadingOutlined } from '@ant-design/icons';
 import { Input as AntdInput } from 'antd';
-import cls from 'classnames';
 
 const ReadPretty = (props) => {
   const prefixCls = usePrefixCls('description-input', props);
@@ -13,7 +12,7 @@ const ReadPretty = (props) => {
     data: { name, tableName },
   } = useCollectionRecord() as any;
   return (
-    <div className={cls(prefixCls, props.className)} style={props.style}>
+    <div className={cx(prefixCls, props.className)} style={props.style}>
       {name !== tableName ? (
         <>
           {name} <span style={{ color: 'GrayText' }}>({tableName})</span>

packages/plugins/@tachybase/plugin-data-source-manager/src/client/component/MainDataSourceManager/Configuration/CollectionFieldsTableArray.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import {
   css,
+  cx,
   RecordIndexProvider,
   RecordProvider,
   SchemaComponent,
@@ -13,7 +14,6 @@ import {
 import { ArrayField, Field, observer, RecursionField, Schema, useField, useFieldSchema } from '@tachybase/schema';
 
 import { Table, TableColumnProps } from 'antd';
-import { default as classNames } from 'classnames';
 import { findIndex } from 'lodash';
 import { useTranslation } from 'react-i18next';
 
@@ -31,7 +31,7 @@ export const components = {
     cell: (props) => (
       <td
         {...props}
-        className={classNames(
+        className={cx(
           props.className,
           css`
             max-width: 300px;

packages/plugins/@tachybase/plugin-data-visualization/package.json

@@ -15,7 +15,6 @@
     "@tachybase/schema": "workspace:*",
     "ahooks": "^3.7.2",
     "antd": "5.16.1",
-    "classnames": "^2.3.1",
     "dayjs": "^1.11.8",
     "deepmerge": "^4.2.2",
     "koa-compose": "^4.1.0",

packages/plugins/@tachybase/plugin-kanban/package.json

@@ -13,7 +13,6 @@
     "@tachybase/components": "workspace:*",
     "@tachybase/schema": "workspace:*",
     "antd": "5.16.1",
-    "classnames": "^2.3.1",
     "lodash": "4.17.21",
     "react-beautiful-dnd": "^13.1.0",
     "react-i18next": "^11.15.1"

packages/plugins/@tachybase/plugin-kanban/src/client/Kanban.Card.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useState } from 'react';
 import {
   ActionContextProvider,
   css,
+  cx,
   DndContext,
   RecordProvider,
   SchemaComponentOptions,
@@ -11,7 +12,6 @@ import { FormLayout } from '@tachybase/components';
 import { observer, RecursionField, useFieldSchema } from '@tachybase/schema';
 
 import { Card } from 'antd';
-import cls from 'classnames';
 
 import { KanbanCardContext } from './context';
 
@@ -39,7 +39,7 @@ export const KanbanCard: any = observer(
           hoverable
           style={{ cursor: 'pointer', overflow: 'hidden' }}
           // bodyStyle={{ paddingBottom: 0 }}
-          className={cls(css`
+          className={cx(css`
             .ant-card-body {
               padding: 16px;
             }

packages/plugins/@tachybase/plugin-mobile-client/package.json

@@ -15,7 +15,6 @@
     "antd": "5.16.1",
     "antd-mobile": "^5.35.0",
     "antd-mobile-icons": "^0.3.0",
-    "classnames": "2.x",
     "lodash": "4.17.21",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",

packages/plugins/@tachybase/plugin-sequence-field/package.json

@@ -13,7 +13,6 @@
     "@tachybase/components": "workspace:*",
     "@tachybase/schema": "workspace:*",
     "antd": "5.16.1",
-    "classnames": "^2.3.1",
     "cron-parser": "4.4.0",
     "dayjs": "^1.11.8",
     "lodash": "4.17.21",

packages/plugins/@tachybase/plugin-theme-editor/package.json

@@ -14,7 +14,6 @@
     "@ctrl/tinycolor": "^3.6.0",
     "@types/lodash": "4.17.0",
     "antd": "5.16.1",
-    "classnames": "^2.3.1",
     "lodash": "4.17.21",
     "rc-util": "^5.32.0",
     "react": "^18.2.0",

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/ColorPanel.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState, type CSSProperties, type FC } from 'react';
+import { cx } from '@tachybase/client';
 
 import { ConfigProvider, Input, InputNumber, Select, theme, type InputProps } from 'antd';
-import classNames from 'classnames';
 import useMergedState from 'rc-util/es/hooks/useMergedState';
 import { HexColorPicker, RgbaColorPicker } from 'react-colorful';
 import tinycolor from 'tinycolor2';
@@ -258,7 +258,7 @@ const ColorPanel: FC<ColorPanelProps> = ({ color, onChange, alpha, style }) => {
   };
 
   return wrapSSR(
-    <div className={classNames(hashId, 'color-panel')} style={style}>
+    <div className={cx(hashId, 'color-panel')} style={style}>
       {(colorMode === 'HEX' || colorMode === 'RGB') && (
         <HexColorPicker
           style={{ height: 160 }}

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/ColorPreview.tsx

@@ -1,6 +1,5 @@
 import React, { type FC } from 'react';
-
+import { cx } from '@tachybase/client';
-import classNames from 'classnames';
 
 import getColorBgImg from './utils/getColorBgImg';
 import makeStyle from './utils/makeStyle';
@@ -42,7 +41,7 @@ const ColorPreview: FC<ColorPreviewProps> = ({ color, style, className, dark, ..
   return warpSSR(
     <div
       {...restProps}
-      className={classNames('previewer-color-preview', className, hashId)}
+      className={cx('previewer-color-preview', className, hashId)}
       style={{
         // @ts-ignore
         ['--antd-token-previewer-color-preview']: color,

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/FilterPanel.tsx

@@ -1,7 +1,7 @@
 import React, { type CSSProperties, type FC } from 'react';
+import { cx } from '@tachybase/client';
 
 import { Segmented, Tag } from 'antd';
-import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 
 import makeStyle from './utils/makeStyle';
@@ -82,7 +82,7 @@ const FilterPanel: FC<FilterPanelProps> = ({
   }
 
   return wrapSSR(
-    <div className={classNames('previewer-filter-panel', hashId, className)} {...rest}>
+    <div className={cx('previewer-filter-panel', hashId, className)} {...rest}>
       {selectedTokens && selectedTokens.length > 0 && (
         <>
           <div className="component-tree-head">

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/IconSwitch.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-
+import { cx } from '@tachybase/client';
-import classNames from 'classnames';
 
 import makeStyle from './utils/makeStyle';
 
@@ -88,15 +87,15 @@ export default function IconSwitch({
   const [wrapSSR, hashId] = useStyle();
 
   return wrapSSR(
-    <div className={classNames('theme-editor-icon-switch', className, hashId)} style={style} {...props}>
+    <div className={cx('theme-editor-icon-switch', className, hashId)} style={style} {...props}>
       <div
-        className={classNames('holder', leftChecked && 'leftChecked')}
+        className={cx('holder', leftChecked && 'leftChecked')}
         onClick={() => {
           onChange?.(!leftChecked);
         }}
       >
-        <span className={classNames('icon', leftChecked && 'active')}>{leftIcon}</span>
+        <span className={cx('icon', leftChecked && 'active')}>{leftIcon}</span>
-        <span className={classNames('icon', !leftChecked && 'active')}>{rightIcon}</span>
+        <span className={cx('icon', !leftChecked && 'active')}>{rightIcon}</span>
       </div>
     </div>,
   );

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/ThemeEditor.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
+import { cx } from '@tachybase/client';
 
 import type { DerivativeFunc } from '@ant-design/cssinjs';
-import classNames from 'classnames';
 
 import { antdComponents } from './component-panel';
 import useControlledTheme from './hooks/useControlledTheme';
@@ -116,7 +116,7 @@ const ThemeEditor = forwardRef<ThemeEditorRef, ThemeEditorProps>(
 
     return wrapSSR(
       <LocaleContext.Provider value={locale}>
-        <div className={classNames(hashId, 'antd-theme-editor', className)} style={style}>
+        <div className={cx(hashId, 'antd-theme-editor', className)} style={style}>
           <div
             style={{
               flex: aliasOpen ? '0 0 860px' : `0 0 ${860 - 320}px`,

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/ThemeSelect.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo, type FC, type ReactNode } from 'react';
+import React, { useMemo, type ReactNode } from 'react';
+import { cx } from '@tachybase/client';
 
 import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Dropdown, Menu } from 'antd';
-import classNames from 'classnames';
 
 import type { Theme } from './interface';
 import makeStyle from './utils/makeStyle';
@@ -122,7 +122,7 @@ const useStyle = makeStyle('ThemeSelect', (token) => ({
   },
 }));
 
-const ThemeSelect: FC<ThemeSelectProps> = (props) => {
+const ThemeSelect = (props: ThemeSelectProps) => {
   const { onEnabledThemeChange, onShownThemeChange, enabledThemes, shownThemes, themes, showAddTheme } = props;
 
   const [wrapSSR, hashId] = useStyle();
@@ -159,7 +159,7 @@ const ThemeSelect: FC<ThemeSelectProps> = (props) => {
   );
 
   return wrapSSR(
-    <div className={classNames('previewer-theme-select', hashId)}>
+    <div className={cx('previewer-theme-select', hashId)}>
       {shownThemeEntities.map((theme) => (
         <span
           onClick={() => {
@@ -173,7 +173,7 @@ const ThemeSelect: FC<ThemeSelectProps> = (props) => {
             );
           }}
           key={theme.key}
-          className={classNames('previewer-theme-select-tag', {
+          className={cx('previewer-theme-select-tag', {
             'previewer-theme-select-tag-active': enabledThemes.includes(theme.key),
           })}
         >
@@ -201,7 +201,7 @@ const ThemeSelect: FC<ThemeSelectProps> = (props) => {
           placement="bottomRight"
           trigger={['click']}
           overlay={<Menu items={dropdownItems} />}
-          overlayClassName={classNames('previewer-theme-select-dropdown', hashId)}
+          overlayClassName={cx('previewer-theme-select-dropdown', hashId)}
         >
           <Button type="primary" shape="circle" className="previewer-theme-select-add-btn" icon={<PlusOutlined />} />
         </Dropdown>

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/TokenInput.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef, useState, type FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { cx } from '@tachybase/client';
 
 import { Button, Dropdown, Input, InputNumber } from 'antd';
-import classNames from 'classnames';
 import { useDebouncyFn } from 'use-debouncy';
 
 import ColorPanel from './ColorPanel';
@@ -81,7 +81,7 @@ type TokenInputProps = {
   hideTheme?: boolean;
 };
 
-const TokenInput: FC<TokenInputProps> = ({
+const TokenInput = ({
   value,
   theme,
   onChange,
@@ -90,7 +90,7 @@ const TokenInput: FC<TokenInputProps> = ({
   onReset,
   canReset: customCanReset,
   hideTheme,
-}) => {
+}: TokenInputProps) => {
   const valueRef = useRef<number | string>(value || '');
   const [tokenValue, setTokenValue] = useState<string | number>(value || '');
   const canReset = customCanReset ?? valueRef.current !== tokenValue;
@@ -213,7 +213,7 @@ const TokenInput: FC<TokenInputProps> = ({
   }
   return wrapSSR(
     <div
-      className={classNames('previewer-token-input', hashId, {
+      className={cx('previewer-token-input', hashId, {
         'previewer-token-input-light': light,
         'previewer-token-input-readonly': readonly,
       })}

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/component-demos/grid/grid.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { cx } from '@tachybase/client';
 
 import { Col, Row } from 'antd';
-import classNames from 'classnames';
 
 import type { ComponentDemo } from '../../interface';
 import makeStyle from '../../utils/makeStyle';
@@ -30,7 +30,7 @@ const Demo = () => {
   const [, hashId] = useStyle();
 
   return (
-    <div className={classNames('previewer-grid-demo', hashId)}>
+    <div className={cx('previewer-grid-demo', hashId)}>
       <Row>
         <Col span={24}>col</Col>
       </Row>

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/component-panel/ComponentCard.tsx

@@ -1,7 +1,7 @@
 import React, { useState, type FC, type PropsWithChildren } from 'react';
+import { cx } from '@tachybase/client';
 
 import { Card, type CardProps } from 'antd';
-import classNames from 'classnames';
 
 import { Control } from '../icons';
 import type { MutableTheme, TokenName } from '../interface';
@@ -57,7 +57,7 @@ const ComponentCard: FC<ComponentCardProps> = ({ children, component, title, the
   return wrapSSR(
     <>
       <Card
-        className={classNames('component-card', hashId)}
+        className={cx('component-card', hashId)}
         title={title}
         extra={
           drawer && theme && <Control className="component-token-control-icon" onClick={() => setDrawerOpen(true)} />

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/component-panel/ComponentDemoGroup.tsx

@@ -1,7 +1,7 @@
 import React, { type FC } from 'react';
+import { cx } from '@tachybase/client';
 
 import { ConfigProvider, Tooltip } from 'antd';
-import classNames from 'classnames';
 
 import ComponentDemos from '../component-demos';
 import type { ComponentDemo, MutableTheme, TokenName } from '../interface';
@@ -71,7 +71,7 @@ const ComponentDemoBlock: FC<ComponentDemoBlockProps> = ({
   const locale = useLocale();
 
   return (
-    <div className={classNames('previewer-component-demo-group-item', hashId)}>
+    <div className={cx('previewer-component-demo-group-item', hashId)}>
       <ComponentCard
         title={component}
         component={component}
@@ -149,7 +149,7 @@ const ComponentDemoGroup: FC<ComponentDemoGroupProps> = ({
 
           return (
             <div
-              className={classNames('previewer-component-demo-group', hashId)}
+              className={cx('previewer-component-demo-group', hashId)}
               key={item}
               id={getComponentDemoId(item)}
               style={{

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/component-panel/ComponentTokenDrawer.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo, type FC } from 'react';
+import { cx } from '@tachybase/client';
 
 import { BuildOutlined, CarOutlined } from '@ant-design/icons';
 import { theme as antdTheme, ConfigProvider, Drawer, Empty, Tag, Tooltip } from 'antd';
-import classNames from 'classnames';
 
 import ComponentDemos from '../component-demos';
 import type { AliasToken, ComponentDemo, MutableTheme, TokenName, TokenValue } from '../interface';
@@ -60,7 +60,7 @@ const ComponentFullDemos: FC<ComponentFullDemosProps> = ({ demos }) => {
   const locale = useLocale();
 
   return (
-    <div className={classNames('previewer-component-full-demos', hashId)} style={{}}>
+    <div className={cx('previewer-component-full-demos', hashId)} style={{}}>
       {demos?.map((demo) => (
         <ComponentCard
           key={demo.key}
@@ -126,7 +126,7 @@ const ComponentTokenDrawer: FC<ComponentTokenDrawerProps> = ({ visible, componen
       }
       onClose={onClose}
       width={1200}
-      className={classNames('previewer-component-token-drawer', hashId)}
+      className={cx('previewer-component-token-drawer', hashId)}
     >
       <div style={{ display: 'flex', height: '100%' }}>
         <ConfigProvider theme={theme.config}>

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/component-panel/ComponentTree.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useMemo, useRef, useState, type FC } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { cx } from '@tachybase/client';
 
 import { SearchOutlined } from '@ant-design/icons';
 import { Badge, Input, Tree } from 'antd';
-import classNames from 'classnames';
 
 import type { FilterMode } from '../FilterPanel';
 import makeStyle from '../utils/makeStyle';
@@ -74,13 +74,13 @@ export type ComponentTreeProps = {
 
 const getTreeItemId = (component: string) => `component-tree-item-${component}`;
 
-const ComponentTree: FC<ComponentTreeProps> = ({
+const ComponentTree = ({
   onSelect,
   components,
   selectedTokens,
   filterMode = 'filter',
   activeComponent,
-}) => {
+}: ComponentTreeProps) => {
   const [wrapSSR, hashId] = useStyle();
   const treeRef = useRef<HTMLDivElement>(null);
   const [search, setSearch] = useState<string>('');
@@ -120,7 +120,7 @@ const ComponentTree: FC<ComponentTreeProps> = ({
               title: (
                 <span
                   id={getTreeItemId(item)}
-                  className={classNames('component-tree-item', {
+                  className={cx('component-tree-item', {
                     'component-tree-item-highlight': filterMode === 'highlight' && relatedComponents.includes(item),
                   })}
                 >
@@ -157,7 +157,7 @@ const ComponentTree: FC<ComponentTreeProps> = ({
   }, [selectedTokens, filterMode]);
 
   return wrapSSR(
-    <div className={classNames('component-tree-wrapper', hashId)}>
+    <div className={cx('component-tree-wrapper', hashId)}>
       <Input
         allowClear
         placeholder="Type to search"

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/component-panel/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useRef, useState, type CSSProperties, type FC } from 'react';
+import { cx } from '@tachybase/client';
 
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import { Breadcrumb, Segmented, Switch } from 'antd';
-import classNames from 'classnames';
 
 import type { FilterMode } from '../FilterPanel';
 import type { Theme, TokenName } from '../interface';
@@ -250,9 +250,9 @@ const Index: FC<ComponentPanelProps> = ({ themes, selectedTokens, filterMode, cl
   );
 
   return wrapSSR(
-    <div className={classNames('component-panel', hashId, className)} {...rest}>
+    <div className={cx('component-panel', hashId, className)} {...rest}>
       <div
-        className={classNames('component-panel-side', {
+        className={cx('component-panel-side', {
           'component-panel-side-hidden': !showSide,
         })}
       >

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/previewer.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cx } from '@tachybase/client';
 
 import { theme as antdTheme, Button, Layout, message } from 'antd';
-import classNames from 'classnames';
 
 import ComponentPanel from './component-panel';
 import FilterPanel, { type FilterMode } from './FilterPanel';
@@ -218,7 +218,7 @@ const Previewer: React.FC<PreviewerProps> = ({ onSave, showTheme, theme, onTheme
   );
 
   return wrapSSR(
-    <Layout className={classNames('previewer-layout', hashId)}>
+    <Layout className={cx('previewer-layout', hashId)}>
       <Header className="previewer-header">
         <span style={{ fontSize: 16, fontWeight: 'bold', marginRight: 16 }}>主题预览器</span>
         {showTheme && (
@@ -278,10 +278,7 @@ const Previewer: React.FC<PreviewerProps> = ({ onSave, showTheme, theme, onTheme
           />
           <Button
             onClick={() => setSiderVisible((prev) => !prev)}
-            className={classNames(
+            className={cx('previewer-sider-collapse-btn', !siderVisible && 'previewer-sider-collapse-btn-collapsed')}
-              'previewer-sider-collapse-btn',
-              !siderVisible && 'previewer-sider-collapse-btn-collapsed',
-            )}
             size="small"
             icon={<Arrow rotate={siderVisible ? 0 : 180} className="previewer-sider-collapse-btn-icon" />}
             shape="circle"

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/AliasPanel.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo, type FC } from 'react';
+import { cx } from '@tachybase/client';
 
 import { CaretRightOutlined, QuestionCircleOutlined, RightOutlined, ShrinkOutlined } from '@ant-design/icons';
 import { Button, Collapse, Empty, Tooltip } from 'antd';
-import classNames from 'classnames';
 import useMergedState from 'rc-util/es/hooks/useMergedState';
 
 import { MutableTheme } from '../../../types';
@@ -155,7 +155,7 @@ const AliasPanel: FC<AliasPanelProps> = ({
   );
 
   return wrapSSR(
-    <div className={classNames(className, 'token-panel-pro-color-alias', hashId)} style={style}>
+    <div className={cx(className, 'token-panel-pro-color-alias', hashId)} style={style}>
       {open ? (
         <>
           <div className="token-panel-pro-color-alias-title">
@@ -197,7 +197,7 @@ const AliasPanel: FC<AliasPanelProps> = ({
                         }}
                       >
                         <Pick
-                          className={classNames('token-panel-pro-token-pick', {
+                          className={cx('token-panel-pro-token-pick', {
                             'token-panel-pro-token-picked': selectedTokens?.alias?.includes(aliasToken),
                           })}
                         />

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenContent.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useMemo, useState, type FC } from 'react';
-import { StablePopover, type ThemeConfig } from '@tachybase/client';
+import { cx, StablePopover, type ThemeConfig } from '@tachybase/client';
 
 import { CaretRightOutlined, ExpandOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { Button, Checkbox, Collapse, ConfigProvider, Switch, Tooltip, Typography } from 'antd';
 import seed from 'antd/es/theme/themes/seed';
-import classNames from 'classnames';
 import { useDebouncyFn } from 'use-debouncy';
 
 import { MutableTheme } from '../../../types';
@@ -397,7 +396,7 @@ const MapTokenCollapseContent: FC<MapTokenCollapseContentProps> = ({
                 }}
               >
                 <Pick
-                  className={classNames('token-panel-pro-token-pick', {
+                  className={cx('token-panel-pro-token-pick', {
                     'token-panel-pro-token-picked': selectedTokens?.map?.includes(mapToken),
                   })}
                 />
@@ -557,7 +556,7 @@ const TokenContent: FC<ColorTokenContentProps> = ({
   };
 
   return wrapSSR(
-    <div className={classNames(hashId, 'token-panel-pro-color')}>
+    <div className={cx(hashId, 'token-panel-pro-color')}>
       <div className="token-panel-pro-color-seeds">
         <div className="token-panel-pro-color-themes">
           <span style={{ marginRight: 12 }}>{locale._lang === 'zh-CN' ? category.name : category.nameEn}</span>

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/TokenDetail.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo, type FC } from 'react';
+import React, { useMemo } from 'react';
+import { cx } from '@tachybase/client';
 
 import { Tooltip } from 'antd';
-import classNames from 'classnames';
 
 import { MutableTheme } from '../../../types';
 import type { TokenValue } from '../interface';
@@ -60,7 +60,7 @@ export type TokenDetailProps = {
   style?: React.CSSProperties;
 };
 
-const TokenDetail: FC<TokenDetailProps> = ({ themes, path, tokenName, className, style }) => {
+const TokenDetail = ({ themes, path, tokenName, className, style }: TokenDetailProps) => {
   const [wrapSSR, hashId] = useStyle();
   const tokenPath = [...path, tokenName];
   const locale = useLocale();
@@ -74,7 +74,7 @@ const TokenDetail: FC<TokenDetailProps> = ({ themes, path, tokenName, className,
   }, [tokenName]);
 
   return wrapSSR(
-    <div className={classNames(className, hashId, 'token-panel-token-detail')} style={style}>
+    <div className={cx(className, hashId, 'token-panel-token-detail')} style={style}>
       <div className="token-panel-pro-token-collapse-map-collapse-token-description">
         {(tokenMeta as any)[tokenName]?.[locale._lang === 'zh-CN' ? 'desc' : 'descEn']}
       </div>

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState, type FC } from 'react';
+import { cx } from '@tachybase/client';
 
 import { Tabs } from 'antd';
-import classNames from 'classnames';
 
 import { Theme } from '../../../types';
 import type { SelectedToken } from '../interface';
@@ -69,7 +69,7 @@ const TokenPanelPro: FC<TokenPanelProProps> = ({
   }, [activeCategory]);
 
   return wrapSSR(
-    <div className={classNames(hashId, className, 'token-panel-pro')} style={style}>
+    <div className={cx(hashId, className, 'token-panel-pro')} style={style}>
       <Tabs
         defaultActiveKey="color"
         tabBarGutter={32}

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/token-panel/index.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cx } from '@tachybase/client';
 
 import { CheckOutlined } from '@ant-design/icons';
 import { theme as antdTheme, Dropdown, Input, Menu, Switch } from 'antd';
-import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 
 import { SearchDropdown } from '../icons';
@@ -176,10 +176,10 @@ export default forwardRef<TokenPanelRef, TokenPreviewProps>((props: TokenPreview
   };
 
   return wrapSSR(
-    <div className={classNames('preview-panel-wrapper', hashId)}>
+    <div className={cx('preview-panel-wrapper', hashId)}>
-      <div className={classNames('preview-panel')}>
+      <div className={cx('preview-panel')}>
         <div style={{ padding: 16 }}>
-          <h3 className={classNames('preview-panel-space', hashId)}>
+          <h3 className={cx('preview-panel-space', hashId)}>
             <span>Alias Token 预览</span>
             <span className="preview-hide-token">
               <span>显示所有</span>
@@ -240,7 +240,7 @@ export default forwardRef<TokenPanelRef, TokenPreviewProps>((props: TokenPreview
                       paddingTop: 2,
                       transition: 'color 0.3s',
                     }}
-                    className={classNames({
+                    className={cx({
                       'previewer-token-type-dropdown-icon-active': mergedFilterTypes.length > 0,
                     })}
                   />
@@ -252,7 +252,7 @@ export default forwardRef<TokenPanelRef, TokenPreviewProps>((props: TokenPreview
           />
         </div>
         <div
-          className={classNames('preview-panel-token-wrapper', {
+          className={cx('preview-panel-token-wrapper', {
             'preview-panel-token-wrapper-ping-top': showTokenListShadowTop,
           })}
         >

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/token-panel/token-card/index.tsx

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react';
+import { cx } from '@tachybase/client';
 
 import {
   AlignLeftOutlined,
@@ -17,7 +18,6 @@ import {
 } from '@ant-design/icons';
 import { Collapse, Space } from 'antd';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
-import classNames from 'classnames';
 import useMergedState from 'rc-util/es/hooks/useMergedState';
 
 import { Motion, ShapeLine } from '../../icons';
@@ -137,7 +137,7 @@ export default ({
   });
 
   return wrapSSR(
-    <div className={classNames('token-card', hashId)}>
+    <div className={cx('token-card', hashId)}>
       <Collapse
         ghost
         expandIcon={({ isActive }) => (

packages/plugins/@tachybase/plugin-theme-editor/src/client/antd-token-previewer/token-panel/token-item/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, type CSSProperties } from 'react';
+import { cx } from '@tachybase/client';
 
 import { CaretRightOutlined } from '@ant-design/icons';
 import { Collapse, Space } from 'antd';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
-import classNames from 'classnames';
 
 import ColorPreview from '../../ColorPreview';
 import { Pick } from '../../icons';
@@ -200,7 +200,7 @@ export default ({
         collapsible="header"
         ghost
         onChange={(key) => setInfoVisible(key.length > 0)}
-        className={classNames('previewer-token-item-collapse', hashId)}
+        className={cx('previewer-token-item-collapse', hashId)}
         expandIcon={({ isActive }) => (
           <CaretRightOutlined rotate={isActive ? 90 : 0} style={{ fontSize: 12, cursor: 'pointer' }} />
         )}
@@ -229,7 +229,7 @@ export default ({
               >
                 <span
                   title={tokenName}
-                  className={classNames('previewer-token-item-name', {
+                  className={cx('previewer-token-item-name', {
                     'previewer-token-item-highlighted': active,
                   })}
                   style={{

packages/plugins/@tachybase/plugin-workflow/package.json

@@ -20,7 +20,6 @@
     "@types/lodash": "^4.17.0",
     "antd": "5.16.1",
     "axios": "^1.6.2",
-    "classnames": "^2.3.1",
     "cron-parser": "4.4.0",
     "lodash": "4.17.21",
     "lru-cache": "8.0.5",

packages/plugins/@tachybase/plugin-workflow/src/client/components/StatusButton.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
+import { createStyles, cx } from '@tachybase/client';
+
 import { Button, Tag } from 'antd';
-import classnames from 'classnames';
 
-import { createStyles } from '@tachybase/client';
+const useStyles = createStyles(({ css }) => ({
-
-const useStyles = createStyles(({ css, token }) => ({
   statusButtonClass: css`
     border: none;
     .ant-tag {
@@ -34,7 +33,7 @@ export function StatusButton(props) {
       {...props}
       shape="circle"
       size="small"
-      className={classnames(tag ? styles.statusButtonClass : styles.noStatusButtonClass, props.className)}
+      className={cx(tag ? styles.statusButtonClass : styles.noStatusButtonClass, props.className)}
     >
       {tag}
     </Button>

packages/plugins/@tachybase/plugin-workflow/src/client/components/renderEngineReference.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { css, i18n } from '@tachybase/client';
 import { evaluators } from '@tachybase/evaluators/client';
-import React from 'react';
 
 export const renderEngineReference = (key: string) => {
   const engine = evaluators.get(key);