style(projects): change component classification

ErrorBoundary.tsx

@@ -1,7 +1,6 @@
 import { useRouteError, useNavigate } from 'react-router-dom';
 import { Button, Typography } from 'antd';
 import { $t } from './src/locales'
-import SvgIcon from '@/components/custom/svg-icon';
 import type { FallbackProps } from 'react-error-boundary'
 import { localStg } from '@/utils/storage';
 

src/App.tsx

@@ -3,11 +3,23 @@ import { localStg } from '@/utils/storage';
 import { getLocale } from '@/store/slice/app';
 import { getAntdTheme, setupThemeVarsToHtml, toggleCssDarkMode } from '@/store/slice/theme/shared.ts';
 import { getDarkMode, themeColors } from '@/store/slice/theme/index.ts';
-import MenuProvider from '@/components/common/MenuProvider.tsx';
+import MenuProvider from '@/components/stateful/MenuProvider.tsx';
 import { router } from '@/router';
 import { antdLocales } from './locales/antd';
-import AppProvider from './components/common/AppProvider.tsx';
-import {info} from '@/constants/app.ts'
+import AppProvider from './components/stateful/AppProvider.tsx';
+import { info } from '@/constants/app.ts'
+import type { WatermarkProps } from 'antd'
+
+const watermarkProps: WatermarkProps = {
+  font: {
+    fontSize: 16,
+  },
+  width: 240,
+  height:128,
+  offset: [12, 60],
+  rotate: -15,
+  zIndex: 9999
+};
 
 const App = () => {
   const locale = useAppSelector(getLocale);
@@ -32,9 +44,13 @@ const App = () => {
       locale={antdLocales[locale]}
       button={{ classNames: { icon: 'align-1px  text-icon' } }}
     >
-      <MenuProvider>
-        <AppProvider>{router.CustomRouterProvider(<GlobalLoading />)}</AppProvider>
-      </MenuProvider>
+      <AppProvider>
+        <AWatermark  className='h-full'  {...watermarkProps} >
+          <MenuProvider>
+            {router.CustomRouterProvider(<GlobalLoading />)}
+          </MenuProvider>
+        </AWatermark>
+      </AppProvider>
     </AConfigProvider>
   );
 };

src/components/common/AppProvider.tsx → src/components/stateful/AppProvider.tsx

@@ -2,6 +2,7 @@ import { App } from 'antd';
 import { cacheTabs } from '@/store/slice/tab';
 import { DARK_MODE_MEDIA_QUERY } from '@/constants/common';
 import { setDarkMode } from '@/store/slice/theme/index.ts';
+
 function ContextHolder() {
   const { message, modal, notification } = App.useApp();
   window.$message = message;
@@ -12,18 +13,21 @@ function ContextHolder() {
 
 const AppProvider = memo(({ children }: { children: React.ReactNode }) => {
   const dispatch = useAppDispatch();
+
   useEventListener(
     'beforeunload',
     () => {
       dispatch(cacheTabs());
     },
     { target: window }
   );
+
   useMount(() => {
     window.matchMedia(DARK_MODE_MEDIA_QUERY).addEventListener('change', event => {
       dispatch(setDarkMode(event.matches));
     });
   });
+
   return (
     <App className="h-full">
       <ContextHolder />

src/components/common/LangSwitch.tsx → src/components/stateful/LangSwitch.tsx

@@ -1,6 +1,7 @@
 import { Dropdown } from 'antd';
 import { changeLocale, getLocale, getLocaleOptions } from '@/store/slice/app';
-import ButtonIcon from '../custom/button-icon';
+import ButtonIcon from '../stateless/custom/ButtonIcon';
+
 interface Props {
   /** Show tooltip */
   showTooltip?: boolean;
@@ -25,7 +26,7 @@ const LangSwitch: FC<Props> = memo(({ showTooltip = true }) => {
           tooltipContent={tooltipContent}
           tooltipPlacement="left"
           icon="heroicons:language"
-        ></ButtonIcon>
+        />
       </div>
     </Dropdown>
   );

src/components/common/MenuProvider.tsx → src/components/stateful/MenuProvider.tsx

@@ -1,12 +1,11 @@
 import type { FC, ReactNode } from 'react';
 import { createContext } from 'react';
 import type { ElegantConstRoute } from '@elegant-router/types';
-import type { RouteMeta } from '@ohh-889/react-auto-route';
 import type { MenuItemType, SubMenuType } from 'antd/es/menu/interface';
 import { getSortRoutes } from '@/store/slice/route';
 import { $t } from '@/locales';
-import SvgIcon from '../custom/svg-icon';
-import BeyondHiding from '../custom/BeyondHiding';
+import SvgIcon from '../stateless/custom/SvgIcon';
+import BeyondHiding from '../stateless/custom/BeyondHiding';
 
 interface Props {
   children: ReactNode;
@@ -36,7 +35,7 @@ function getGlobalMenuByBaseRoute(route: ElegantConstRoute): MenuItemType {
     i18nKey,
     icon = import.meta.env.VITE_MENU_ICON,
     localIcon
-  } = (route.meta as unknown as RouteMeta) ?? {};
+  } = route.meta ?? {};
 
   const label = i18nKey ? $t(i18nKey) : title!;
   const menu: MenuItemType = {

src/components/common/MenuToggler.tsx → src/components/stateful/MenuToggler.tsx

@@ -1,6 +1,7 @@
 import { getSiderCollapse, toggleSiderCollapse } from '@/store/slice/app';
-import ButtonIcon from '../custom/button-icon';
-import SvgIcon from '../custom/svg-icon';
+import ButtonIcon from '../stateless/custom/ButtonIcon';
+import SvgIcon from '../stateless/custom/SvgIcon';
+
 interface Props {
   /** Arrow style icon */
   arrowIcon?: boolean;
@@ -19,6 +20,7 @@ const icons: Record<NumberBool, Record<NumberBool, string>> = {
 type NumberBool = 0 | 1;
 const MenuToggler: FC<Props> = memo(({ arrowIcon, className }) => {
   const { t } = useTranslation();
+
   const siderCollapse = useAppSelector(getSiderCollapse);
   const dispatch = useAppDispatch();
 

src/components/custom/SoybeanAvatar.tsx → src/components/stateful/SoybeanAvatar.tsx

@@ -1,6 +1,7 @@
 import ClassNames from 'classnames';
 import soybeanAvatar from '@/assets/imgs/soybean.jpg';
-// eslint-disable-next-line react/prop-types
+
+
 const SoybeanAvatar: FC<React.ComponentProps<'div'>> = ({ className, ...props }) => {
   return (
     <div

src/components/common/ThemeSchemaSwitch.tsx → src/components/stateful/ThemeSchemaSwitch.tsx

@@ -1,7 +1,7 @@
 import type { ButtonProps, TooltipProps } from 'antd';
 import type { CSSProperties } from 'react';
 import { getDarkMode, getThemeSettings, toggleThemeScheme } from '@/store/slice/theme';
-import ButtonIcon from '../custom/button-icon';
+import ButtonIcon from '../stateless/custom/ButtonIcon';
 
 interface Props {
   /** Show tooltip */
@@ -68,7 +68,7 @@ const ThemeSchemaSwitch: FC<Props> = memo(({ tooltipPlacement = 'bottom', showTo
       {...props}
       tooltipPlacement={tooltipPlacement}
       onClick={toggleDark}
-    ></ButtonIcon>
+    />
   );
 });
 

src/components/common/ExceptionBase.tsx → src/components/stateless/common/ExceptionBase.tsx

@@ -1,7 +1,8 @@
 import { Button } from 'antd';
+import SvgIcon from '../custom/SvgIcon';
 
-import SvgIcon from '../custom/svg-icon';
 type ExceptionType = '403' | '404' | '500';
+
 interface Props {
   /**
    * Exception type
@@ -18,6 +19,7 @@ const iconMap: Record<ExceptionType, string> = {
   '500': 'service-error'
 };
 const ExceptionBase: FC<Props> = memo(({ type }) => {
+
   const { t } = useTranslation();
 
   return (

src/components/common/FullScreen.tsx → src/components/stateless/common/FullScreen.tsx

@@ -1,4 +1,4 @@
-import ButtonIcon from '../custom/button-icon';
+import ButtonIcon from '../custom/ButtonIcon';
 
 interface Props {
   full?: boolean;
@@ -14,7 +14,7 @@ const FullScreen: FC<Props> = memo(({ full, toggleFullscreen }) => {
       tooltipContent={full ? t('icon.fullscreenExit') : t('icon.fullscreen')}
       onClick={toggleFullscreen}
     >
-      {full ? IconGridiconsFullscreenExit({}) : IconGridiconsFullscreen({})}
+      {full ? <IconGridiconsFullscreenExit /> : <IconGridiconsFullscreen/>}
     </ButtonIcon>
   );
 });

src/components/common/GlobalLoading.tsx → src/components/stateless/common/GlobalLoading.tsx

@@ -1,5 +1,5 @@
 import ClassNames from 'classnames';
-import SystemLogo from './system-logo';
+import SystemLogo from './SystemLogo';
 
 const loadingClasses = [
   'left-0 top-0',
@@ -8,13 +8,13 @@ const loadingClasses = [
   'right-0 bottom-0 animate-delay-1500'
 ];
 
+
 const GlobalLoading = memo(() => {
   const { t } = useTranslation();
 
   return (
-    <div className="fixed-center flex-col">
+    <div className="fixed-center flex-col" >
       <SystemLogo className="size-128px text-primary" />
-
       <div className="my-36px h-56px w-56px">
         <div className="relative h-full animate-spin">
           {loadingClasses.map(item => {

src/components/common/PinToggler.tsx → src/components/stateless/common/PinToggler.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import ButtonIcon from '../custom/button-icon';
-import SvgIcon from '../custom/svg-icon';
+import ButtonIcon from '../custom/ButtonIcon';
+import SvgIcon from '../custom/SvgIcon';
 interface Props {
   pin?: boolean;
   onClick?: React.ComponentProps<'button'>['onClick'];
   className: string;
 }
 const PinToggler: FC<Props> = memo(({ pin, onClick, className }) => {
+
   const { t } = useTranslation();
 
   const icon = pin ? 'mdi-pin-off' : 'mdi-pin';

src/components/common/ReloadButton.tsx → src/components/stateless/common/ReloadButton.tsx

@@ -1,18 +1,19 @@
-import ButtonIcon from '../custom/button-icon';
+import ButtonIcon from '../custom/ButtonIcon';
 
 interface Props {
   loading?: boolean;
   handClick?: () => void;
 }
 const ReloadButton: FC<Props> = memo(({ loading, handClick }) => {
+
   const { t } = useTranslation();
 
   return (
     <ButtonIcon
       onClick={handClick}
       tooltipContent={t('icon.reload')}
     >
-      {IconAntDesignReloadOutlined({ className: loading ? 'animate-spin animate-duration-750' : '' })}
+      <IconAntDesignReloadOutlined className={loading ? 'animate-spin animate-duration-750' : '' } />
     </ButtonIcon>
   );
 });

src/components/custom/BeyondHiding.tsx → src/components/stateless/custom/BeyondHiding.tsx

@@ -10,6 +10,7 @@ type BeyondHidingProps = Omit<TooltipProps, 'open' | 'trigger'> & {
 
 const BeyondHiding: FC<BeyondHidingProps> = memo(({ className, style, title, ...props }) => {
   const [isShow, setIsShow] = useState(false);
+
   const contentRef = useRef<HTMLSpanElement>(null);
 
   const isShowTooltip = (): void => {

src/components/custom/button-icon.tsx → src/components/stateless/custom/ButtonIcon.tsx

@@ -1,7 +1,7 @@
 import { Button, Tooltip } from 'antd';
 import type { ButtonProps, TooltipProps } from 'antd';
 import { type CSSProperties } from 'react';
-import SvgIcon from './svg-icon';
+import SvgIcon from './SvgIcon';
 
 interface Props extends Omit<ButtonProps, 'icon' | 'iconPosition'> {
   /** Button class */

src/components/custom/LookForward.tsx → src/components/stateless/custom/LookForward.tsx

@@ -1,4 +1,4 @@
-import SvgIcon from './svg-icon';
+import SvgIcon from './SvgIcon';
 interface Props {
   children?: React.ReactNode;
 }

src/components/custom/wave-bg.tsx → src/components/stateless/custom/WaveBg.tsx

@@ -6,8 +6,10 @@ interface Props {
 }
 
 const WaveBg = memo(({ themeColor }: Props) => {
+
   const lightColor = getPaletteColorByNumber(themeColor, 200);
   const darkColor = getPaletteColorByNumber(themeColor, 500);
+
   return (
     <div className="absolute-lt z-1 size-full overflow-hidden">
       <div className="absolute -right-300px -top-900px lt-sm:(-right-100px -top-1170px)">

src/hooks/common/icon.ts

@@ -1,5 +1,5 @@
 import { useSvgIconRender } from '@sa/hooks';
-import SvgIcon from '@/components/custom/svg-icon';
+import SvgIcon from '@/components/stateless/custom/svg-icon';
 
 export function useSvgIcon() {
   const { SvgIconVNode } = useSvgIconRender(SvgIcon);

src/hooks/common/menu.ts

@@ -1,4 +1,4 @@
-import { MenuContext } from '@/components/common/MenuProvider';
+import { MenuContext } from '@/components/stateful/MenuProvider';
 
 export function useMenu() {
   const object = useContext(MenuContext);

src/layouts/modules/global-footer/index.tsx

@@ -1,4 +1,4 @@
-import DarkModeContainer from '@/components/common/DarkModeContainer';
+import DarkModeContainer from '@/components/stateless/common/DarkModeContainer';
 const GlobalFooter = memo(() => {
   return (
     <DarkModeContainer className="h-full flex-center">

src/layouts/modules/global-header/components/ThemeButton.tsx

@@ -1,5 +1,4 @@
 import { useDispatch } from 'react-redux';
-import ButtonIcon from '@/components/custom/button-icon';
 import { openThemeDrawer } from '@/store/slice/app';
 
 const ThemeButton = memo(() => {
@@ -11,7 +10,7 @@ const ThemeButton = memo(() => {
       tooltipContent={t('icon.themeConfig')}
       triggerParent
       onClick={() => dispatch(openThemeDrawer())}
-    ></ButtonIcon>
+    />
   );
 });
 

src/layouts/modules/global-header/components/UserAvatar.tsx

@@ -2,8 +2,7 @@ import { Button, Dropdown } from 'antd';
 import type { MenuProps } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { resetStore, selectToken, selectUserInfo } from '@/store/slice/auth';
-import ButtonIcon from '@/components/custom/button-icon';
-import SvgIcon from '@/components/custom/svg-icon';
+
 
 const UserAvatar = memo(() => {
   const token = useAppSelector(selectToken);

src/layouts/modules/global-header/index.tsx

@@ -1,9 +1,8 @@
 import type { MenuProps } from 'antd';
-import DarkModeContainer from '@/components/common/DarkModeContainer';
-import ThemeSchemaSwitch from '@/components/common/ThemeSchemaSwitch';
-import LangSwitch from '@/components/common/LangSwitch';
-import FullScreen from '@/components/common/FullScreen';
-import MenuToggler from '@/components/common/MenuToggler';
+import DarkModeContainer from '@/components/stateless/common/DarkModeContainer';
+import ThemeSchemaSwitch from '@/components/stateful/ThemeSchemaSwitch';
+import LangSwitch from '@/components/stateful/LangSwitch';
+import FullScreen from '@/components/stateless/common/FullScreen';
 import GlobalLogo from '../global-logo';
 import GlobalSearch from '../global-search';
 import HorizontalMenu from '../global-menu/BaseMenu';

src/layouts/modules/global-logo/index.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 import type { LinkProps } from 'react-router-dom';
 import ClassNames from 'classnames';
-import SystemLogo from '@/components/common/system-logo';
+import SystemLogo from '@/components/stateless/common/SystemLogo';
 interface Props extends Omit<LinkProps, 'to'> {
   /** Whether to show the title */
   showTitle?: boolean;

src/layouts/modules/global-menu/FirstLevelMenu.tsx

@@ -4,7 +4,6 @@ import { transformColorWithOpacity } from '@sa/color';
 import type { SubMenuType } from 'antd/es/menu/interface';
 import { cloneElement } from 'react';
 import { getSiderCollapse } from '@/store/slice/app';
-import MenuToggler from '@/components/common/MenuToggler';
 import { getDarkMode, getThemeSettings } from '@/store/slice/theme';
 import { selectActiveFirstLevelMenuKey } from '@/store/slice/tab';
 interface Props {

src/layouts/modules/global-menu/VerticalMixMenu.tsx

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { useRouter } from '@sa/simple-router';
 import { getDarkMode, getThemeSettings } from '@/store/slice/theme';
 import { getMixSiderFixed, toggleMixSiderFixed } from '@/store/slice/app';
-import DarkModeContainer from '@/components/common/DarkModeContainer';
+import DarkModeContainer from '@/components/stateless/common/DarkModeContainer';
 import { setActiveFirstLevelMenuKey } from '@/store/slice/tab';
-import PinToggler from '@/components/common/PinToggler';
+import PinToggler from '@/components/stateless/common/PinToggler';
 import { getActiveFirstLevelMenuKey } from '@/store/slice/tab/shared';
 import FirstLevelMenu from './FirstLevelMenu';
 import BaseMenu from './BaseMenu';

src/layouts/modules/global-search/index.tsx

@@ -1,8 +1,9 @@
-import ButtonIcon from '@/components/custom/button-icon';
-
 const GlobalSearch = memo(() => {
   const { t } = useTranslation();
-  return <ButtonIcon tooltipContent={t('common.search')}>{IconUilSearch({})}</ButtonIcon>;
+
+  return <ButtonIcon tooltipContent={t('common.search')}>
+    <IconUilSearch />
+  </ButtonIcon>;
 });
 
 export default GlobalSearch;