@gadmin2n/schematics 0.0.69 → 0.0.71

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/page/Components/PageFormModal.tsx

@@ -1,7 +1,11 @@
-import React, { useEffect, useMemo, useState } from "react";
-import type { PageMenuTreeNode, PageResourceAssignment, ResourceDefinition } from "../types";
-import { useModalForm } from "@refinedev/antd";
-import { type HttpError, type RedirectAction } from "@refinedev/core";
+import React, { useEffect, useMemo, useState } from 'react';
+import type {
+  PageMenuTreeNode,
+  PageResourceAssignment,
+  ResourceDefinition,
+} from '../types';
+import { useModalForm } from '@refinedev/antd';
+import { type HttpError, type RedirectAction } from '@refinedev/core';
 import {
   Form,
   Input,
@@ -14,9 +18,9 @@ import {
   Checkbox,
   Table,
   Divider,
-} from "antd";
-import type { TransferProps } from "antd";
-import { PageFieldSelector } from "../queries";
+} from 'antd';
+import type { TransferProps } from 'antd';
+import { PageFieldSelector } from '../queries';
 
 type PageFormFieldValues = {
   name?: string;
@@ -33,12 +37,17 @@ type PageFormFieldValues = {
   resourcePermissionAssignments?: Record<number, string[]>;
 };
 
-const AVAILABLE_PERMISSION_ACTIONS = ["readAny", "createAny", "updateAny", "deleteAny"];
+const AVAILABLE_PERMISSION_ACTIONS = [
+  'readAny',
+  'createAny',
+  'updateAny',
+  'deleteAny',
+];
 
 const SPECIAL_CHARACTER_VALIDATION_PATTERN = /[^\u4e00-\u9fa5a-zA-Z0-9\s\-_/]/;
 
 interface PageFormModalProps {
-  formActionType: "create" | "edit";
+  formActionType: 'create' | 'edit';
   editingPageId?: number;
   redirectAfterSubmit?: RedirectAction;
   onFormSubmitSuccess?: () => void;
@@ -57,7 +66,7 @@ const buildPageTreeNodeLookupMap = (
   const nodeLookupMap = new Map<string, PageMenuTreeNode>();
 
   const traverseAndAddToMap = (nodes?: PageMenuTreeNode[]) => {
-    nodes?.forEach(node => {
+    nodes?.forEach((node) => {
       nodeLookupMap.set(String(node.value), node);
       if (node.children?.length) {
         traverseAndAddToMap(node.children);
@@ -80,14 +89,14 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
   currentResourceAssignments = [],
   allPagesData = [],
   defaultParentId,
-  defaultPathPrefix = "",
+  defaultPathPrefix = '',
 }) => {
   const { formProps, modalProps, onFinish, close } = useModalForm<
     any,
     HttpError,
     PageFormFieldValues
   >({
-    resource: "page",
+    resource: 'page',
     action: formActionType,
     id: editingPageId,
     defaultVisible: true,
@@ -101,37 +110,44 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
   });
 
   // Watch form values for conditional field visibility
-  const isVirtual = Form.useWatch("isVirtual", formProps.form);
-  const iframeUrl = Form.useWatch("iframeUrl", formProps.form);
-  const externalRedirectUrl = Form.useWatch("externalRedirectUrl", formProps.form);
+  const isVirtual = Form.useWatch('isVirtual', formProps.form);
+  const iframeUrl = Form.useWatch('iframeUrl', formProps.form);
+  const externalRedirectUrl = Form.useWatch(
+    'externalRedirectUrl',
+    formProps.form,
+  );
   const hasExternalUrl = !!(
     (iframeUrl && /^(https?:\/\/|\/\w)/.test(iframeUrl.trim())) ||
     (externalRedirectUrl && /^https?:\/\//.test(externalRedirectUrl.trim()))
   );
 
   const [selectedResourceIds, setSelectedResourceIds] = useState<string[]>([]);
-  const [resourcePermissionMap, setResourcePermissionMap] = useState<Record<number, string[]>>({});
-  const [permissionValidationError, setPermissionValidationError] = useState<string>("");
+  const [resourcePermissionMap, setResourcePermissionMap] = useState<
+    Record<number, string[]>
+  >({});
+  const [permissionValidationError, setPermissionValidationError] =
+    useState<string>('');
   const [initialResourceAssignments, setInitialResourceAssignments] = useState<{
     resourceIds: string[];
     permissionMap: Record<number, string[]>;
   }>({ resourceIds: [], permissionMap: {} });
-  const [initialFormValues, setInitialFormValues] = useState<PageFormFieldValues>({});
+  const [initialFormValues, setInitialFormValues] =
+    useState<PageFormFieldValues>({});
   const [isCodeManuallyEdited, setIsCodeManuallyEdited] = useState(false);
   const [isPathManuallyEdited, setIsPathManuallyEdited] = useState(false);
 
   // Set default values for create mode with parent
   useEffect(() => {
-    if (formActionType === "create" && formProps.form) {
+    if (formActionType === 'create' && formProps.form) {
       const initialValues: Partial<PageFormFieldValues> = {};
-      
+
       if (defaultParentId) {
         initialValues.parentId = defaultParentId;
       }
       if (defaultPathPrefix) {
         initialValues.path = defaultPathPrefix;
       }
-      
+
       if (Object.keys(initialValues).length > 0) {
         formProps.form.setFieldsValue(initialValues);
       }
@@ -139,15 +155,17 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
   }, [formActionType, defaultParentId, defaultPathPrefix, formProps.form]);
 
   useEffect(() => {
-    if (formActionType === "edit" && currentResourceAssignments.length > 0) {
-      const initialSelectedIds = currentResourceAssignments.map(assignment =>
+    if (formActionType === 'edit' && currentResourceAssignments.length > 0) {
+      const initialSelectedIds = currentResourceAssignments.map((assignment) =>
         String(assignment.resourceId),
       );
       setSelectedResourceIds(initialSelectedIds);
 
       const initialPermissionMap: Record<number, string[]> = {};
-      currentResourceAssignments.forEach(assignment => {
-        initialPermissionMap[assignment.resourceId] = [...assignment.assignedPermissions];
+      currentResourceAssignments.forEach((assignment) => {
+        initialPermissionMap[assignment.resourceId] = [
+          ...assignment.assignedPermissions,
+        ];
       });
       setResourcePermissionMap(initialPermissionMap);
 
@@ -161,7 +179,7 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
 
   // Store initial form values when form is loaded in edit mode
   useEffect(() => {
-    if (formActionType === "edit" && formProps.form) {
+    if (formActionType === 'edit' && formProps.form) {
       const currentValues = formProps.form.getFieldsValue();
       setInitialFormValues({
         name: currentValues.name,
@@ -179,26 +197,28 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
   }, [formActionType, formProps.form, formProps.initialValues]);
 
   const resourceTransferDataSource = useMemo(() => {
-    return allAvailableResources.map(resource => ({
+    return allAvailableResources.map((resource) => ({
       key: String(resource.id),
       title: resource.name,
-      description: resource.description || "",
+      description: resource.description || '',
     }));
   }, [allAvailableResources]);
 
-  const handleResourceTransferChange: TransferProps["onChange"] = newTargetKeys => {
+  const handleResourceTransferChange: TransferProps['onChange'] = (
+    newTargetKeys,
+  ) => {
     setSelectedResourceIds(newTargetKeys as string[]);
 
-    const newResourceIds = new Set(newTargetKeys.map(key => Number(key)));
-    setResourcePermissionMap(prevMap => {
+    const newResourceIds = new Set(newTargetKeys.map((key) => Number(key)));
+    setResourcePermissionMap((prevMap) => {
       const updatedMap: Record<number, string[]> = {};
-      Object.keys(prevMap).forEach(resourceIdStr => {
+      Object.keys(prevMap).forEach((resourceIdStr) => {
         const resourceId = Number(resourceIdStr);
         if (newResourceIds.has(resourceId)) {
           updatedMap[resourceId] = prevMap[resourceId];
         }
       });
-      newTargetKeys.forEach(key => {
+      newTargetKeys.forEach((key) => {
         const resourceId = Number(key);
         if (!updatedMap[resourceId]) {
           updatedMap[resourceId] = []; // Initialize with empty array, user must select at least one permission
@@ -209,7 +229,7 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
 
     // Clear validation error when user changes resource selection
     if (permissionValidationError) {
-      setPermissionValidationError("");
+      setPermissionValidationError('');
     }
   };
 
@@ -218,14 +238,16 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
     permissionAction: string,
     isChecked: boolean,
   ) => {
-    setResourcePermissionMap(prevMap => {
+    setResourcePermissionMap((prevMap) => {
       const currentPermissions = prevMap[resourceId] || [];
       let updatedPermissions: string[];
 
       if (isChecked) {
         updatedPermissions = [...currentPermissions, permissionAction];
       } else {
-        updatedPermissions = currentPermissions.filter(action => action !== permissionAction);
+        updatedPermissions = currentPermissions.filter(
+          (action) => action !== permissionAction,
+        );
       }
 
       return {
@@ -236,28 +258,32 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
 
     // Clear validation error when user makes changes
     if (permissionValidationError) {
-      setPermissionValidationError("");
+      setPermissionValidationError('');
     }
   };
 
   const filteredParentPageTreeOptions = useMemo(() => {
-    if (formActionType !== "edit" || !editingPageId || !parentPageTreeOptions) {
+    if (formActionType !== 'edit' || !editingPageId || !parentPageTreeOptions) {
       return parentPageTreeOptions;
     }
 
-    const filterOutCurrentPage = (nodes: PageMenuTreeNode[]): PageMenuTreeNode[] => {
+    const filterOutCurrentPage = (
+      nodes: PageMenuTreeNode[],
+    ): PageMenuTreeNode[] => {
       return nodes
-        .filter(node => String(node.value) !== String(editingPageId))
-        .map(node => ({
+        .filter((node) => String(node.value) !== String(editingPageId))
+        .map((node) => ({
           ...node,
-          children: node.children ? filterOutCurrentPage(node.children) : undefined,
+          children: node.children
+            ? filterOutCurrentPage(node.children)
+            : undefined,
         }));
     };
 
     return filterOutCurrentPage(parentPageTreeOptions);
   }, [parentPageTreeOptions, formActionType, editingPageId]);
 
-  formProps.onFinish = values => {
+  formProps.onFinish = (values) => {
     // Clear path when external URL is configured (iframe or redirect)
     if (!hasExternalUrl) {
       values.path = null;
@@ -265,24 +291,26 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
 
     // Validate that each selected resource has at least one permission
     const resourcesWithoutPermissions: string[] = [];
-    selectedResourceIds.forEach(resourceIdStr => {
+    selectedResourceIds.forEach((resourceIdStr) => {
       const resourceId = Number(resourceIdStr);
       const permissions = resourcePermissionMap[resourceId] || [];
       if (permissions.length === 0) {
-        const resource = allAvailableResources.find(r => r.id === resourceId);
-        resourcesWithoutPermissions.push(resource?.name || `Resource ${resourceId}`);
+        const resource = allAvailableResources.find((r) => r.id === resourceId);
+        resourcesWithoutPermissions.push(
+          resource?.name || `Resource ${resourceId}`,
+        );
       }
     });
 
     if (resourcesWithoutPermissions.length > 0) {
       setPermissionValidationError(
-        `The following resources must have at least one permission selected: ${resourcesWithoutPermissions.join(", ")}`,
+        `The following resources must have at least one permission selected: ${resourcesWithoutPermissions.join(', ')}`,
       );
       return;
     }
 
     // In edit mode, check if anything has changed
-    if (formActionType === "edit") {
+    if (formActionType === 'edit') {
       // Check if form fields have changed
       const formFieldsChanged =
         values.name !== initialFormValues.name ||
@@ -298,8 +326,11 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
 
       // Check if resource assignments have changed
       const resourceIdsChanged =
-        selectedResourceIds.length !== initialResourceAssignments.resourceIds.length ||
-        selectedResourceIds.some(id => !initialResourceAssignments.resourceIds.includes(id));
+        selectedResourceIds.length !==
+          initialResourceAssignments.resourceIds.length ||
+        selectedResourceIds.some(
+          (id) => !initialResourceAssignments.resourceIds.includes(id),
+        );
 
       let permissionsChanged = false;
       if (!resourceIdsChanged) {
@@ -307,11 +338,12 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
         for (const resourceIdStr of selectedResourceIds) {
           const resourceId = Number(resourceIdStr);
           const currentPermissions = resourcePermissionMap[resourceId] || [];
-          const initialPermissions = initialResourceAssignments.permissionMap[resourceId] || [];
+          const initialPermissions =
+            initialResourceAssignments.permissionMap[resourceId] || [];
 
           if (
             currentPermissions.length !== initialPermissions.length ||
-            currentPermissions.some(p => !initialPermissions.includes(p))
+            currentPermissions.some((p) => !initialPermissions.includes(p))
           ) {
             permissionsChanged = true;
             break;
@@ -322,9 +354,9 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
       // If nothing has changed, don't submit
       if (!formFieldsChanged && !resourceIdsChanged && !permissionsChanged) {
         Modal.info({
-          title: "No Changes Detected",
+          title: 'No Changes Detected',
           content:
-            "No changes have been made to the form. The form will be closed without submitting.",
+            'No changes have been made to the form. The form will be closed without submitting.',
         });
         close();
         return;
@@ -338,28 +370,36 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
 
       // Only include resourceAssignments if they changed
       if (resourceIdsChanged || permissionsChanged) {
-        formattedValuesForSubmit.resourceAssignments = selectedResourceIds.map(resourceIdStr => {
+        formattedValuesForSubmit.resourceAssignments = selectedResourceIds.map(
+          (resourceIdStr) => {
+            const resourceId = Number(resourceIdStr);
+            const resource = allAvailableResources.find(
+              (r) => r.id === resourceId,
+            );
+            return {
+              resourceId,
+              resourceName: resource?.name || '',
+              assignedPermissions: resourcePermissionMap[resourceId] || [],
+            };
+          },
+        );
+      }
+      onFinish(formattedValuesForSubmit);
+    } else {
+      // In create mode, always submit all data
+      const resourceAssignmentsForSubmit = selectedResourceIds.map(
+        (resourceIdStr) => {
           const resourceId = Number(resourceIdStr);
-          const resource = allAvailableResources.find(r => r.id === resourceId);
+          const resource = allAvailableResources.find(
+            (r) => r.id === resourceId,
+          );
           return {
             resourceId,
-            resourceName: resource?.name || "",
+            resourceName: resource?.name || '',
             assignedPermissions: resourcePermissionMap[resourceId] || [],
           };
-        });
-      }
-      onFinish(formattedValuesForSubmit);
-    } else {
-      // In create mode, always submit all data
-      const resourceAssignmentsForSubmit = selectedResourceIds.map(resourceIdStr => {
-        const resourceId = Number(resourceIdStr);
-        const resource = allAvailableResources.find(r => r.id === resourceId);
-        return {
-          resourceId,
-          resourceName: resource?.name || "",
-          assignedPermissions: resourcePermissionMap[resourceId] || [],
-        };
-      });
+        },
+      );
 
       const formattedValuesForSubmit = {
         ...values,
@@ -373,21 +413,26 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
 
   const resourcePermissionTableColumns = [
     {
-      title: "Resource Name",
-      dataIndex: "resourceName",
-      key: "resourceName",
-      width: "30%",
+      title: 'Resource Name',
+      dataIndex: 'resourceName',
+      key: 'resourceName',
+      width: '30%',
     },
     {
-      title: "Permissions",
-      key: "permissions",
-      render: (_: any, record: { resourceId: number; resourceName: string }) => (
+      title: 'Permissions',
+      key: 'permissions',
+      render: (
+        _: any,
+        record: { resourceId: number; resourceName: string },
+      ) => (
         <Space>
-          {AVAILABLE_PERMISSION_ACTIONS.map(permissionAction => (
+          {AVAILABLE_PERMISSION_ACTIONS.map((permissionAction) => (
             <Checkbox
               key={`${record.resourceId}-${permissionAction}`}
-              checked={resourcePermissionMap[record.resourceId]?.includes(permissionAction)}
-              onChange={e =>
+              checked={resourcePermissionMap[record.resourceId]?.includes(
+                permissionAction,
+              )}
+              onChange={(e) =>
                 handleResourcePermissionChange(
                   record.resourceId,
                   permissionAction,
@@ -404,9 +449,9 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
   ];
 
   const selectedResourcesForPermissionTable = useMemo(() => {
-    return selectedResourceIds.map(resourceIdStr => {
+    return selectedResourceIds.map((resourceIdStr) => {
       const resourceId = Number(resourceIdStr);
-      const resource = allAvailableResources.find(r => r.id === resourceId);
+      const resource = allAvailableResources.find((r) => r.id === resourceId);
       return {
         resourceId,
         resourceName: resource?.name || `Resource ${resourceId}`,
@@ -425,19 +470,22 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
         }
         close();
       }}
-      title={formActionType === "create" ? "Create New Page" : "Edit Page"}
+      title={formActionType === 'create' ? 'Create New Page' : 'Edit Page'}
     >
       <Form {...formProps} layout="vertical">
         <Form.Item
           rules={[
-            { required: true, message: "Page name is required" },
+            { required: true, message: 'Page name is required' },
             {
               validator: (_, value) => {
-                if (!value || !SPECIAL_CHARACTER_VALIDATION_PATTERN.test(value)) {
+                if (
+                  !value ||
+                  !SPECIAL_CHARACTER_VALIDATION_PATTERN.test(value)
+                ) {
                   return Promise.resolve();
                 }
                 return Promise.reject(
-                  new Error("Special characters are not allowed in page name."),
+                  new Error('Special characters are not allowed in page name.'),
                 );
               },
             },
@@ -452,10 +500,12 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
                 // Check if page name already exists (case-insensitive)
                 const isDuplicate = allPagesData.some((page: any) => {
                   // Skip current page when editing
-                  if (formActionType === "edit" && page.id === editingPageId) {
+                  if (formActionType === 'edit' && page.id === editingPageId) {
                     return false;
                   }
-                  return page.name?.toLowerCase() === trimmedValue.toLowerCase();
+                  return (
+                    page.name?.toLowerCase() === trimmedValue.toLowerCase()
+                  );
                 });
 
                 if (isDuplicate) {
@@ -475,24 +525,28 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
         >
           <Input
             placeholder="Enter the page name (e.g., User Management)."
-            onChange={e => {
+            onChange={(e) => {
               const nameValue = e.target.value;
               // Auto-generate code from name if code hasn't been manually edited
               if (!isCodeManuallyEdited && nameValue) {
                 const generatedCode = nameValue
                   .trim()
                   .toLowerCase()
-                  .replace(/[\s-]+/g, "_") // Replace spaces and hyphens with underscores
-                  .replace(/[^a-z0-9_]/g, ""); // Remove invalid characters
+                  .replace(/[\s-]+/g, '_') // Replace spaces and hyphens with underscores
+                  .replace(/[^a-z0-9_]/g, ''); // Remove invalid characters
                 formProps.form?.setFieldsValue({ code: generatedCode });
               }
               // Auto-generate path from name if path hasn't been manually edited (only in create mode)
-              if (!isPathManuallyEdited && nameValue && formActionType === "create") {
+              if (
+                !isPathManuallyEdited &&
+                nameValue &&
+                formActionType === 'create'
+              ) {
                 const generatedPathSegment = nameValue
                   .trim()
                   .toLowerCase()
-                  .replace(/[\s_]+/g, "-") // Replace spaces and underscores with hyphens
-                  .replace(/[^a-z0-9-/]/g, ""); // Remove invalid characters
+                  .replace(/[\s_]+/g, '-') // Replace spaces and underscores with hyphens
+                  .replace(/[^a-z0-9-/]/g, ''); // Remove invalid characters
                 const newPath = defaultPathPrefix + generatedPathSegment;
                 formProps.form?.setFieldsValue({ path: newPath });
               }
@@ -501,10 +555,11 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
         </Form.Item>
         <Form.Item
           rules={[
-            { required: true, message: "Page Code is required" },
+            { required: true, message: 'Page Code is required' },
             {
               pattern: /^[a-zA-Z0-9_]+$/,
-              message: "Page Code can only contain letters, numbers and underscores",
+              message:
+                'Page Code can only contain letters, numbers and underscores',
             },
             {
               validator: async (_, value) => {
@@ -517,15 +572,19 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
                 // Check if page code already exists (case-insensitive)
                 const isDuplicate = allPagesData.some((page: any) => {
                   // Skip current page when editing
-                  if (formActionType === "edit" && page.id === editingPageId) {
+                  if (formActionType === 'edit' && page.id === editingPageId) {
                     return false;
                   }
-                  return page.code?.toLowerCase() === trimmedValue.toLowerCase();
+                  return (
+                    page.code?.toLowerCase() === trimmedValue.toLowerCase()
+                  );
                 });
 
                 if (isDuplicate) {
                   return Promise.reject(
-                    new Error("Page Code already exists. Please use a different code."),
+                    new Error(
+                      'Page Code already exists. Please use a different code.',
+                    ),
                   );
                 }
 
@@ -554,7 +613,7 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
             <Form.Item name="parentId" label="Parent Page (Menu Position)">
               {filteredParentPageTreeOptions?.length ? (
                 <TreeSelect
-                  style={{ width: "100%" }}
+                  style={{ width: '100%' }}
                   treeData={filteredParentPageTreeOptions}
                   treeDefaultExpandAll
                   allowClear
@@ -563,7 +622,8 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
               ) : (
                 <>
                   <Typography.Text type="secondary">
-                    No parent pages available. This page will be created at root level.
+                    No parent pages available. This page will be created at root
+                    level.
                   </Typography.Text>
                   <Input type="hidden" />
                 </>
@@ -585,7 +645,7 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
             </Form.Item>
             <Form.Item
               name="iframeUrl"
-              label={"Iframe URL"}
+              label={'Iframe URL'}
               tooltip={{
                 title: (
                   <div>
@@ -597,7 +657,7 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
                     </p>
                     <ul style={{ margin: 0, paddingLeft: 16 }}>
                       <li>
-                        <code>{"{{locale}}"}</code> → 当前语言 (en/zh_CN)
+                        <code>{'{{locale}}'}</code> → 当前语言 (en/zh_CN)
                       </li>
                     </ul>
                     <p style={{ marginTop: 8 }}>
@@ -607,12 +667,16 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
                 ),
                 overlayStyle: { maxWidth: 320 },
               }}
-              dependencies={["externalRedirectUrl"]}
+              dependencies={['externalRedirectUrl']}
               rules={[
                 {
                   validator: (_, value) => {
                     if (value?.trim() && externalRedirectUrl?.trim()) {
-                      return Promise.reject(new Error("不能同时填写 Iframe URL 和 External Redirect URL，请只填其中一个"));
+                      return Promise.reject(
+                        new Error(
+                          '不能同时填写 Iframe URL 和 External Redirect URL，请只填其中一个',
+                        ),
+                      );
                     }
                     return Promise.resolve();
                   },
@@ -623,21 +687,29 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
             </Form.Item>
             <Form.Item
               name="externalRedirectUrl"
-              dependencies={["iframeUrl"]}
-              label={"External Redirect URL"}
+              dependencies={['iframeUrl']}
+              label={'External Redirect URL'}
               tooltip={{
-                title: <p style={{ marginBottom: 8 }}>设置后，页面将打开一个新标签并跳转到指定的外部链接。</p>,
+                title: (
+                  <p style={{ marginBottom: 8 }}>
+                    设置后，页面将打开一个新标签并跳转到指定的外部链接。
+                  </p>
+                ),
                 overlayStyle: { maxWidth: 320 },
               }}
               rules={[
                 {
-                  type: "url",
-                  message: "Please enter a valid URL",
+                  type: 'url',
+                  message: 'Please enter a valid URL',
                 },
                 {
                   validator: (_, value) => {
                     if (value?.trim() && iframeUrl?.trim()) {
-                      return Promise.reject(new Error("不能同时填写 Iframe URL 和 External Redirect URL，请只填其中一个"));
+                      return Promise.reject(
+                        new Error(
+                          '不能同时填写 Iframe URL 和 External Redirect URL，请只填其中一个',
+                        ),
+                      );
                     }
                     return Promise.resolve();
                   },
@@ -651,11 +723,16 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
                 rules={[
                   {
                     validator: (_, value) => {
-                      if (!value || !SPECIAL_CHARACTER_VALIDATION_PATTERN.test(value)) {
+                      if (
+                        !value ||
+                        !SPECIAL_CHARACTER_VALIDATION_PATTERN.test(value)
+                      ) {
                         return Promise.resolve();
                       }
                       return Promise.reject(
-                        new Error("Special characters are not allowed in path.")
+                        new Error(
+                          'Special characters are not allowed in path.',
+                        ),
                       );
                     },
                   },
@@ -678,16 +755,19 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
           </>
         )}
         <Form.Item name="description" label="Page Description">
-          <Input.TextArea rows={2} placeholder="Enter a brief description of this page's purpose" />
+          <Input.TextArea
+            rows={2}
+            placeholder="Enter a brief description of this page's purpose"
+          />
         </Form.Item>
         <Divider>Resource Assignment & Permissions</Divider>
         <Form.Item label="Select Resources to Assign">
           <Transfer
             dataSource={resourceTransferDataSource}
-            titles={["Available Resources", "Assigned Resources"]}
+            titles={['Available Resources', 'Assigned Resources']}
             targetKeys={selectedResourceIds}
             onChange={handleResourceTransferChange}
-            render={item => item.title}
+            render={(item) => item.title}
             showSearch
             filterOption={(inputValue, item) =>
               item.title.toLowerCase().includes(inputValue.toLowerCase()) ||
@@ -699,8 +779,8 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
         {selectedResourceIds.length > 0 && (
           <Form.Item
             label="Configure Permissions for Each Resource"
-            validateStatus={permissionValidationError ? "error" : ""}
-            help={permissionValidationError || ""}
+            validateStatus={permissionValidationError ? 'error' : ''}
+            help={permissionValidationError || ''}
           >
             <Table
               dataSource={selectedResourcesForPermissionTable}
@@ -712,12 +792,16 @@ export const PageFormModal: React.FC<PageFormModalProps> = ({
             />
           </Form.Item>
         )}
-        {formActionType === "edit" && currentResourceAssignments.length > 0 && (
+        {formActionType === 'edit' && currentResourceAssignments.length > 0 && (
           <Form.Item label="Current Permission Overview">
             <Space wrap>
               {Array.from(
-                new Set(currentResourceAssignments.flatMap(a => a.assignedPermissions)),
-              ).map(permissionAction => (
+                new Set(
+                  currentResourceAssignments.flatMap(
+                    (a) => a.assignedPermissions,
+                  ),
+                ),
+              ).map((permissionAction) => (
                 <Tag key={permissionAction} color="blue">
                   {permissionAction}
                 </Tag>