feat(projects): Synchronize the useRouterPush of soybean

Author: Ohh-889

packages/simple-router/src/index.ts

@@ -1,11 +1,18 @@
 import CreateRouter from './router';
 import { useRoute } from './hooks/useRoute';
 import { useRouter } from './hooks/useRouter';
-import type { AfterEach, BeforeEach, RouteLocationNormalizedLoaded } from './types';
 import type { RouteRecordNormalized } from './matcher/types';
 
 export default CreateRouter;
 
 export { useRoute, useRouter };
 
-export type { RouteLocationNormalizedLoaded, RouteRecordNormalized, BeforeEach, AfterEach };
+export type { RouteRecordNormalized };
+
+export type {
+  LocationQueryValueRaw,
+  RouteLocationNamedRaw,
+  AfterEach,
+  BeforeEach,
+  RouteLocationNormalizedLoaded
+} from './types';

packages/simple-router/src/router.tsx

@@ -33,7 +33,7 @@ class CreateRouter {
   initRoute = false;
   reactRouter: RemixRouter;
   initReactRoutes: RouteObject[] = [];
-  matcher: CreateRouterMatcher;
+  private matcher: CreateRouterMatcher;
   currentRoute = START_LOCATION_NORMALIZED;
   getReactRoutes: (route: ElegantConstRoute) => RouteObject;
 
@@ -67,6 +67,8 @@ class CreateRouter {
       await init(this.reactRouter);
       this.reactRouter.navigate(this.reactRouter.state.location, { replace: true });
     });
+
+    this.push = this.push.bind(this);
   }
 
   /**

src/components/advanced/DragContent.tsx

@@ -50,7 +50,7 @@ const DragContent: FC<Props> = ({ columns, setColumnChecks }) => {
                     {...provider.dragHandleProps}
                     className="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
                   >
-                    {IconMdiDrag({ className: 'mr-8px h-full cursor-move text-icon' })}
+                    <IconMdiDrag className="mr-8px h-full cursor-move text-icon" />
                     <Checkbox
                       checked={item.checked}
                       onClick={() => handleChange(item.checked, index)}

src/components/advanced/TableColumnSetting.tsx

@@ -16,7 +16,7 @@ const TableColumnSetting: FC<Props> = memo(({ content }) => {
       content={content}
     >
       <Button
-        icon={IconAntDesignSettingOutlined({})}
+        icon={<IconAntDesignSettingOutlined />}
         size="small"
       >
         {t('common.columnSetting')}

src/constants/app.ts

@@ -12,8 +12,7 @@ export const loginModuleRecord: Record<UnionKey.LoginModule, App.I18n.I18nKey> =
   'pwd-login': 'page.login.pwdLogin.title',
   'code-login': 'page.login.codeLogin.title',
   register: 'page.login.register.title',
-  'reset-pwd': 'page.login.resetPwd.title',
-  'bind-wechat': 'page.login.bindWeChat.title'
+  'reset-pwd': 'page.login.resetPwd.title'
 };
 
 export const themeLayoutModeRecord: Record<UnionKey.ThemeLayoutMode, App.I18n.I18nKey> = {

src/hooks/common/login.ts

@@ -19,9 +19,7 @@ export function useLogin() {
 
     if (userName) {
       dispatch(initAuthRoute());
-      if (redirect) {
-        redirectFromLogin();
-      }
+      await redirectFromLogin(redirect);
       window.$notification?.success({
         message: t('page.login.common.loginSuccess'),
         description: t('page.login.common.welcomeBack', { userName })

src/hooks/common/routerPush.ts

@@ -1,53 +1,43 @@
-import { useSearchParams } from 'react-router-dom';
 import { startTransition } from 'react';
-import { router } from '@/router';
+import { useRouter } from '@sa/simple-router';
+import type { RouteKey } from '@elegant-router/types';
+import type { RouteLocationNamedRaw } from '@sa/simple-router';
+
+interface RouterPushOptions {
+  query?: Record<string, string>;
+  params?: Record<string, string>;
+}
 
 /**
  * Router push
  *
  * Jump to the specified route, it can replace function router.push
  */
 export function useRouterPush() {
+  const router = useRouter();
+
   const [searchParams] = useSearchParams();
-  const { pathname } = useLocation();
 
-  const routerBack = () => {
-    router.reactRouter.navigate(-1);
-  };
+  const routerPush = router.push;
 
-  async function toHome() {
-    return router.push('/');
-  }
+  const routerBack = router.back;
 
-  function getQuery() {
-    const query: Record<string, string> = {};
-    for (const pairs of searchParams.entries()) {
-      query[pairs[0]] = pairs[1];
-    }
-    return query;
-  }
+  async function routerPushByKey(key: RouteKey, options?: RouterPushOptions) {
+    const { query, params } = options || {};
 
-  /**
-   * Navigate to login page
-   *
-   * @param loginModule The login module
-   * @param redirectUrl The redirect url, if not specified, it will be the current route fullPath
-   */
-  async function toLogin(loginModule?: UnionKey.LoginModule, redirectUrl?: string) {
-    const module = loginModule || 'pwd-login';
+    const routeLocation: RouteLocationNamedRaw = {
+      name: key
+    };
 
-    const redirect = redirectUrl || pathname;
+    if (Object.keys(query || {}).length) {
+      routeLocation.query = query;
+    }
 
-    return router.reactRouter.navigate({ pathname: `/login/${module}`, search: `redirect=${redirect}` });
-  }
-  function objectToQueryParams(obj: Record<string, string | number>) {
-    const params = new URLSearchParams();
-    for (const key in obj) {
-      if (Object.hasOwn(obj, key)) {
-        params.append(key, obj[key] as string);
-      }
+    if (Object.keys(params || {}).length) {
+      routeLocation.params = params;
     }
-    return params.toString();
+
+    return routerPush(routeLocation);
   }
 
   /**
@@ -67,41 +57,77 @@ export function useRouterPush() {
     return query;
   };
 
-  const menuPush = (key: string) => {
-    startTransition(() => {
-      const query = getRouteQueryOfMetaByKey(key);
-      router.push({ name: key, query });
-    });
-  };
+  function routerPushByKeyWithMetaQuery(key: RouteKey) {
+    const query = getRouteQueryOfMetaByKey(key);
+
+    return routerPushByKey(key, { query });
+  }
+
+  async function toHome() {
+    return routerPush('/');
+  }
+
+  /**
+   * Navigate to login page
+   *
+   * @param loginModule The login module
+   * @param redirectUrl The redirect url, if not specified, it will be the current route fullPath
+   */
+  async function toLogin(loginModule?: UnionKey.LoginModule, redirectUrl?: string) {
+    const module = loginModule || 'pwd-login';
+
+    const options: RouterPushOptions = {
+      params: {
+        module
+      }
+    };
+
+    const redirect = redirectUrl || router.currentRoute.fullPath;
+
+    options.query = {
+      redirect
+    };
+
+    return routerPushByKey('login', options);
+  }
 
   /**
    * Toggle login module
    *
    * @param module
    */
-  function toggleLoginModule(module: UnionKey.LoginModule) {
-    const query = getQuery();
+  async function toggleLoginModule(module: UnionKey.LoginModule) {
+    const query = router.currentRoute.query as Record<string, string>;
+
+    return routerPushByKey(`login_${module}`, { query });
+  }
 
-    router.reactRouter.navigate({
-      pathname: `/login/${module}`,
-      search: objectToQueryParams(query)
+  function menuPush(key: string) {
+    startTransition(() => {
+      routerPushByKeyWithMetaQuery(key as RouteKey);
     });
   }
 
-  /** Redirect from login */
-  function redirectFromLogin() {
+  /**
+   * Redirect from login
+   *
+   * @param [needRedirect=true] Whether to redirect after login. Default is `true`
+   */
+  async function redirectFromLogin(needRedirect = true) {
     const redirect = searchParams.get('redirect');
 
-    if (redirect) {
-      router.reactRouter.navigate(redirect);
+    if (needRedirect && redirect) {
+      routerPush(redirect);
     } else {
       toHome();
     }
   }
+
   return {
-    routerPush: router,
+    routerPush,
     routerBack,
     toLogin,
+    routerPushByKeyWithMetaQuery,
     menuPush,
     redirectFromLogin,
     toggleLoginModule

src/types/union-key.d.ts

@@ -9,7 +9,7 @@ declare namespace UnionKey {
    * - reset-pwd: reset password
    * - bind-wechat: bind wechat
    */
-  type LoginModule = 'pwd-login' | 'code-login' | 'register' | 'reset-pwd' | 'bind-wechat';
+  type LoginModule = 'pwd-login' | 'code-login' | 'register' | 'reset-pwd';
 
   /** Theme scheme */
   type ThemeScheme = 'light' | 'dark' | 'auto';