diff --git a/src/pages/management/system/permission/index.tsx b/src/pages/management/system/permission/index.tsx
index 3b9f777..d4277da 100644
--- a/src/pages/management/system/permission/index.tsx
+++ b/src/pages/management/system/permission/index.tsx
@@ -14,128 +14,140 @@ import { Permission } from '#/entity';
 import { BasicStatus, PermissionType } from '#/enum';
 
 const defaultPermissionValue: Permission = {
-  id: '',
-  parentId: '',
-  name: '',
-  label: '',
-  route: '',
-  component: '',
-  icon: '',
-  hide: false,
-  status: BasicStatus.ENABLE,
-  type: PermissionType.CATALOGUE,
+    id: '',
+    parentId: '',
+    name: '',
+    label: '',
+    route: '',
+    component: '',
+    icon: '',
+    hide: false,
+    status: BasicStatus.ENABLE,
+    type: PermissionType.CATALOGUE,
 };
-export default function PermissionPage() {
-  const permissions = useUserPermission();
-  const { t } = useTranslation();
+export default () => {
+    const permissions = useUserPermission();
+    const { t } = useTranslation();
 
-  const [permissionModalProps, setPermissionModalProps] = useState<PermissionModalProps>({
-    formValue: { ...defaultPermissionValue },
-    title: 'New',
-    show: false,
-    onOk: () => {
-      setPermissionModalProps((prev) => ({ ...prev, show: false }));
-    },
-    onCancel: () => {
-      setPermissionModalProps((prev) => ({ ...prev, show: false }));
-    },
-  });
-  const columns: ColumnsType<Permission> = [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      width: 300,
-      render: (_, record) => <div>{t(record.label)}</div>,
-    },
-    {
-      title: 'Type',
-      dataIndex: 'type',
-      width: 60,
-      render: (_, record) => <ProTag color="processing">{PermissionType[record.type]}</ProTag>,
-    },
-    {
-      title: 'Icon',
-      dataIndex: 'icon',
-      width: 60,
-      render: (icon) => {
-        if (isNil(icon)) return '';
-        if (icon.startsWith('ic')) {
-          return <SvgIcon icon={icon} size={18} className="ant-menu-item-icon" />;
-        }
-        return <Iconify icon={icon} size={18} className="ant-menu-item-icon" />;
-      },
-    },
-    {
-      title: 'Component',
-      dataIndex: 'component',
-    },
-    {
-      title: 'Status',
-      dataIndex: 'status',
-      align: 'center',
-      width: 120,
-      render: (status) => (
-        <ProTag color={status === BasicStatus.DISABLE ? 'error' : 'success'}>
-          {status === BasicStatus.DISABLE ? 'Disable' : 'Enable'}
-        </ProTag>
-      ),
-    },
-    { title: 'Order', dataIndex: 'order', width: 60 },
-    {
-      title: 'Action',
-      key: 'operation',
-      align: 'center',
-      width: 100,
-      render: (_, record) => (
-        <div className="flex w-full justify-center text-gray">
-          <IconButton onClick={() => onEdit(record)}>
-            <Iconify icon="solar:pen-bold-duotone" size={18} />
-          </IconButton>
-          <Popconfirm title="Delete the Permission" okText="Yes" cancelText="No" placement="left">
-            <IconButton>
-              <Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
-            </IconButton>
-          </Popconfirm>
-        </div>
-      ),
-    },
-  ];
+    const [permissionModalProps, setPermissionModalProps] = useState<PermissionModalProps>({
+        formValue: { ...defaultPermissionValue },
+        title: 'New',
+        show: false,
+        onOk: () => {
+            setPermissionModalProps((prev) => ({ ...prev, show: false }));
+        },
+        onCancel: () => {
+            setPermissionModalProps((prev) => ({ ...prev, show: false }));
+        },
+    });
+    const columns: ColumnsType<Permission> = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 300,
+            render: (_, record) => <div>{t(record.label)}</div>,
+        },
+        {
+            title: 'Type',
+            dataIndex: 'type',
+            width: 60,
+            render: (_, record) => (
+                // @ts-expect-error: ts(7053) type 'PermissionType' can't be used to index type 'typeof PermissionType'.
+                <ProTag color="processing">{PermissionType[record.type]}</ProTag>
+            ),
+        },
+        {
+            title: 'Icon',
+            dataIndex: 'icon',
+            width: 60,
+            render: (icon) => {
+                if (isNil(icon)) return '';
+                if (icon.startsWith('ic')) {
+                    return <SvgIcon icon={icon} size={18} className="ant-menu-item-icon" />;
+                }
+                return <Iconify icon={icon} size={18} className="ant-menu-item-icon" />;
+            },
+        },
+        {
+            title: 'Component',
+            dataIndex: 'component',
+        },
+        {
+            title: 'Status',
+            dataIndex: 'status',
+            align: 'center',
+            width: 120,
+            render: (status) => (
+                <ProTag color={status === BasicStatus.DISABLE ? 'error' : 'success'}>
+                    {status === BasicStatus.DISABLE ? 'Disable' : 'Enable'}
+                </ProTag>
+            ),
+        },
+        { title: 'Order', dataIndex: 'order', width: 60 },
+        {
+            title: 'Action',
+            key: 'operation',
+            align: 'center',
+            width: 100,
+            render: (_, record) => (
+                <div className="flex w-full justify-center text-gray">
+                    <IconButton onClick={() => onEdit(record)}>
+                        <Iconify icon="solar:pen-bold-duotone" size={18} />
+                    </IconButton>
+                    <Popconfirm
+                        title="Delete the Permission"
+                        okText="Yes"
+                        cancelText="No"
+                        placement="left"
+                    >
+                        <IconButton>
+                            <Iconify
+                                icon="mingcute:delete-2-fill"
+                                size={18}
+                                className="text-error"
+                            />
+                        </IconButton>
+                    </Popconfirm>
+                </div>
+            ),
+        },
+    ];
 
-  const onCreate = () => {
-    setPermissionModalProps((prev) => ({
-      ...prev,
-      show: true,
-      ...defaultPermissionValue,
-    }));
-  };
+    const onCreate = () => {
+        setPermissionModalProps((prev) => ({
+            ...prev,
+            show: true,
+            ...defaultPermissionValue,
+        }));
+    };
 
-  const onEdit = (formValue: Permission) => {
-    setPermissionModalProps((prev) => ({
-      ...prev,
-      show: true,
-      title: 'Edit',
-      formValue,
-    }));
-  };
-  return (
-    <Card
-      title="Permission List"
-      extra={
-        <Button type="primary" onClick={onCreate}>
-          New
-        </Button>
-      }
-    >
-      <Table
-        rowKey="id"
-        size="small"
-        scroll={{ x: 'max-content' }}
-        pagination={false}
-        columns={columns}
-        dataSource={permissions}
-      />
+    const onEdit = (formValue: Permission) => {
+        setPermissionModalProps((prev) => ({
+            ...prev,
+            show: true,
+            title: 'Edit',
+            formValue,
+        }));
+    };
+    return (
+        <Card
+            title="Permission List"
+            extra={
+                <Button type="primary" onClick={onCreate}>
+                    New
+                </Button>
+            }
+        >
+            <Table
+                rowKey="id"
+                size="small"
+                scroll={{ x: 'max-content' }}
+                pagination={false}
+                columns={columns}
+                dataSource={permissions}
+            />
 
-      <PermissionModal {...permissionModalProps} />
-    </Card>
-  );
-}
+            <PermissionModal {...permissionModalProps} />
+        </Card>
+    );
+};
diff --git a/types/enum.ts b/types/enum.ts
index cf23187..0846d44 100644
--- a/types/enum.ts
+++ b/types/enum.ts
@@ -1,58 +1,58 @@
 export enum BasicStatus {
-  DISABLE,
-  ENABLE,
+    DISABLE,
+    ENABLE,
 }
 
 export enum ResultEnum {
-  SUCCESS = 0,
-  ERROR = -1,
-  TIMEOUT = 401,
+    SUCCESS = 0,
+    ERROR = -1,
+    TIMEOUT = 401,
 }
 
 export enum StorageEnum {
-  User = 'user',
-  Token = 'token',
-  Settings = 'settings',
-  I18N = 'i18nextLng',
+    User = 'user',
+    Token = 'token',
+    Settings = 'settings',
+    I18N = 'i18nextLng',
 }
 
 export enum ThemeMode {
-  Light = 'light',
-  Dark = 'dark',
+    Light = 'light',
+    Dark = 'dark',
 }
 
 export enum ThemeLayout {
-  Vertical = 'vertical',
-  Horizontal = 'horizontal',
-  Mini = 'mini',
+    Vertical = 'vertical',
+    Horizontal = 'horizontal',
+    Mini = 'mini',
 }
 
 export enum ThemeColorPresets {
-  Default = 'default',
-  Cyan = 'cyan',
-  Purple = 'purple',
-  Blue = 'blue',
-  Orange = 'orange',
-  Red = 'red',
+    Default = 'default',
+    Cyan = 'cyan',
+    Purple = 'purple',
+    Blue = 'blue',
+    Orange = 'orange',
+    Red = 'red',
 }
 
 export enum LocalEnum {
-  en_US = 'en_US',
-  zh_CN = 'zh_CN',
+    en_US = 'en_US',
+    zh_CN = 'zh_CN',
 }
 
 export enum MultiTabOperation {
-  FULLSCREEN = 'fullscreen',
-  REFRESH = 'refresh',
-  CLOSE = 'close',
-  CLOSEOTHERS = 'closeOthers',
-  CLOSEALL = 'closeAll',
-  CLOSELEFT = 'closeLeft',
-  CLOSERIGHT = 'closeRight',
+    FULLSCREEN = 'fullscreen',
+    REFRESH = 'refresh',
+    CLOSE = 'close',
+    CLOSEOTHERS = 'closeOthers',
+    CLOSEALL = 'closeAll',
+    CLOSELEFT = 'closeLeft',
+    CLOSERIGHT = 'closeRight',
 }
 
 export enum PermissionType {
-  CATALOGUE,
-  MENU,
-  BUTTON,
+    CATALOGUE = '10',
+    MENU = '20',
+    BUTTON = '60',
 }