feat: 添加切换权限页面

Author: Ohh-889

src/pages/(base)/function/toggle-auth/index.tsx

@@ -0,0 +1,144 @@
+import { useLoading } from '@sa/hooks';
+import type { DescriptionsProps } from 'antd';
+
+import { useAuth } from '@/features/auth';
+import { selectUserInfo } from '@/features/auth/authStore';
+import { useInitAuth } from '@/features/auth/initAuth';
+import { useRouter } from '@/features/router';
+import { initTab, useUpdateTabs } from '@/features/tab/tabHooks';
+import { useThemeSettings } from '@/features/theme';
+
+type AccountKey = 'admin' | 'super' | 'user';
+
+interface Account {
+  key: AccountKey;
+  label: string;
+  password: string;
+  userName: string;
+}
+
+const ToggleAuth = () => {
+  const { t } = useTranslation();
+
+  const userInfo = useAppSelector(selectUserInfo);
+  const updateTabs = useUpdateTabs();
+  const { hasAuth } = useAuth();
+
+  const { toLogin } = useInitAuth();
+
+  const { loading, startLoading } = useLoading();
+  const themeSettings = useThemeSettings();
+  const { reload, resetRoutes } = useRouter();
+
+  const [loginAccount, setLoginAccount] = useState<AccountKey>('super');
+
+  const accounts: Account[] = [
+    {
+      key: 'super',
+      label: t('page.login.pwdLogin.superAdmin'),
+      password: '123456',
+      userName: 'Super'
+    },
+    {
+      key: 'admin',
+      label: t('page.login.pwdLogin.admin'),
+      password: '123456',
+      userName: 'Admin'
+    },
+    {
+      key: 'user',
+      label: t('page.login.pwdLogin.user'),
+      password: '123456',
+      userName: 'User'
+    }
+  ];
+
+  const roles: DescriptionsProps['items'] = [
+    {
+      children: (
+        <ASpace>
+          {userInfo.roles.map(role => (
+            <ATag key={role}>{role}</ATag>
+          ))}
+        </ASpace>
+      ),
+      key: '1',
+      label: t('page.manage.user.userRole')
+    },
+    {
+      children: (
+        <ASpace>
+          {accounts.map(account => (
+            <AButton
+              disabled={loading && loginAccount !== account.key}
+              key={account.key}
+              loading={loading && loginAccount === account.key}
+              onClick={() => handleToggleAccount(account)}
+            >
+              {account.label}
+            </AButton>
+          ))}
+        </ASpace>
+      ),
+      key: '2',
+      label: t('page.function.toggleAuth.toggleAccount')
+    }
+  ];
+
+  async function handleToggleAccount(account: Account) {
+    setLoginAccount(account.key);
+
+    startLoading();
+
+    resetRoutes();
+
+    await toLogin({ password: account.password, userName: account.userName }, false);
+
+    initTab(themeSettings.tab.cache, updateTabs);
+
+    reload();
+  }
+  return (
+    <ASpace
+      className="w-full"
+      direction="vertical"
+      size={16}
+    >
+      <ACard
+        className="card-wrapper"
+        size="small"
+        title={t('request.logout')}
+      >
+        <ADescriptions
+          bordered
+          column={1}
+          items={roles}
+          layout="vertical"
+          size="small"
+        />
+
+        <ACard
+          className="card-wrapper"
+          size="small"
+          title={t('page.function.toggleAuth.authHook')}
+          variant="borderless"
+        >
+          <ASpace>
+            {hasAuth('B_CODE1') && <AButton>{t('page.function.toggleAuth.superAdminVisible')}</AButton>}
+            {hasAuth('B_CODE2') && <AButton>{t('page.function.toggleAuth.adminVisible')}</AButton>}
+            {hasAuth('B_CODE3') && <AButton>{t('page.function.toggleAuth.adminOrUserVisible')}</AButton>}
+          </ASpace>
+        </ACard>
+      </ACard>
+    </ASpace>
+  );
+};
+
+export const handle = {
+  i18nKey: 'route.function_toggle-auth',
+  icon: 'ic:round-construction',
+  order: 4,
+  title: 'function_toggle-auth'
+};
+
+export default ToggleAuth;

src/pages/(base)/home/index.tsx

@@ -49,7 +49,6 @@ const Home = () => {
 };
 
 export const handle = {
-  constant: true,
   i18nKey: 'route.home',
   icon: 'mdi:monitor-dashboard',
   order: 1,

src/router/elegant/imports.ts

@@ -28,6 +28,7 @@ export const pages: Record<string, () => Promise<any>> = {
 "(base)_function_request": () => import("@/pages/(base)/function/request/index.tsx"),
 "(base)_function_super-page": () => import("@/pages/(base)/function/super-page/index.tsx"),
 "(base)_function_tab": () => import("@/pages/(base)/function/tab/index.tsx"),
+"(base)_function_toggle-auth": () => import("@/pages/(base)/function/toggle-auth/index.tsx"),
 "(base)_home": () => import("@/pages/(base)/home/index.tsx"),
 "(base)_manage": () => import("@/pages/(base)/manage/index.tsx"),
 "(base)_manage_menu": () => import("@/pages/(base)/manage/menu/index.tsx"),

src/router/elegant/routeMap.ts

@@ -39,6 +39,7 @@ export const routeMap: RouteMap = {
  "(base)_function_request": "/function/request",
  "(base)_function_super-page": "/function/super-page",
  "(base)_function_tab": "/function/tab",
+ "(base)_function_toggle-auth": "/function/toggle-auth",
  "(base)_home": "/home",
  "(base)_manage": "/manage",
  "(base)_manage_menu": "/manage/menu",

src/router/elegant/routes.ts

@@ -73,6 +73,11 @@ export const generatedRoutes = [
                 matchedFiles: [null, '/src/pages/(base)/function/tab/index.tsx', null, null],
                 name: '(base)_function_tab',
                 path: '/function/tab'
+              },
+              {
+                matchedFiles: [null, '/src/pages/(base)/function/toggle-auth/index.tsx', null, null],
+                name: '(base)_function_toggle-auth',
+                path: '/function/toggle-auth'
               }
             ]
           },

src/types/auto-imports.d.ts

@@ -64,6 +64,7 @@ declare global {
   const SoybeanAvatar: typeof import('../components/SoybeanAvatar')['default']
   const SvgIcon: typeof import('../components/SvgIcon')['default']
   const SystemLogo: typeof import('../components/SystemLogo')['default']
+  const TypingAnimation: typeof import('../components/TypingAnimation')['TypingAnimation']
   const WaveBg: typeof import('../components/WaveBg')['default']
   const createRef: typeof import('react')['createRef']
   const forwardRef: typeof import('react')['forwardRef']

src/types/elegant-router.d.ts

@@ -40,6 +40,7 @@ declare module "@soybean-react/vite-plugin-react-router" {
     "(base)_function_request": "/function/request";
     "(base)_function_super-page": "/function/super-page";
     "(base)_function_tab": "/function/tab";
+    "(base)_function_toggle-auth": "/function/toggle-auth";
     "(base)_home": "/home";
     "(base)_manage": "/manage";
     "(base)_manage_menu": "/manage/menu";
@@ -143,6 +144,7 @@ declare module "@soybean-react/vite-plugin-react-router" {
     | "(base)_function_request"
     | "(base)_function_super-page"
     | "(base)_function_tab"
+    | "(base)_function_toggle-auth"
     | "(base)_home"
     | "(base)"
     | "(base)_manage"