feat: release v1.0.0

src/pages/system/role/components/assign-menus-dialog.tsx

@@ -4,6 +4,7 @@ import { toast } from 'sonner'
 
 import { assignSysRoleMenus, getAllSysMenus, getSysRoleMenus } from '@/api'
 import { CheckboxTree, useCheckboxTree, type CheckboxTreeNode } from '@/components/checkbox-tree'
+import { DialogSkeleton } from '@/components/dialog-skeleton'
 import { Button } from '@/components/ui/button.tsx'
 import {
   Dialog,
@@ -40,15 +41,23 @@ const buildTreeData = (data: SysMenu[], parentId: string | null = null): Checkbo
 
 export function AssignMenusDialog({ open, onClose, onConfirm, currentRow }: Props) {
   const [treeData, setTreeData] = useState<CheckboxTreeNode[]>([])
-  const { getNodeState, toggleNode, checkedIds, setCheckedIds } = useCheckboxTree(treeData, [])
+  const { getNodeState, toggleNode, setCheckedIds, getCheckedIdsWithParents } = useCheckboxTree(
+    treeData,
+    [],
+  )
   const [loading, setLoading] = useState(false)
+  const [skeletonLoading, setSkeletonLoading] = useState(true)
 
   useEffect(() => {
     const fetchMenus = async () => {
+      setSkeletonLoading(true)
+
       const { data: menus } = await getAllSysMenus()
       const { data: checkedMenus } = await getSysRoleMenus(currentRow?.id as number)
       setTreeData(buildTreeData(menus))
       setCheckedIds(checkedMenus.map((item) => item.id.toString()))
+
+      setSkeletonLoading(false)
     }
 
     if (open && currentRow?.id) fetchMenus()
@@ -59,7 +68,7 @@ export function AssignMenusDialog({ open, onClose, onConfirm, currentRow }: Prop
       setLoading(true)
       await assignSysRoleMenus(
         currentRow?.id as number,
-        checkedIds.map((item) => parseInt(item)),
+        getCheckedIdsWithParents().map((item) => parseInt(item)),
       )
       toast('操作成功！')
       onConfirm()
@@ -77,16 +86,18 @@ export function AssignMenusDialog({ open, onClose, onConfirm, currentRow }: Prop
         </DialogHeader>
 
         <div className='h-125 overflow-y-auto'>
-          <CheckboxTree
-            data={treeData}
-            getNodeState={getNodeState}
-            onToggle={toggleNode}
-            renderLabel={(node: CheckboxTreeNode) => (
-              <div className='flex gap-2'>
-                <div>{node.data?.name}</div>
-              </div>
-            )}
-          />
+          <DialogSkeleton rows={20} loading={skeletonLoading}>
+            <CheckboxTree
+              data={treeData}
+              getNodeState={getNodeState}
+              onToggle={toggleNode}
+              renderLabel={(node: CheckboxTreeNode) => (
+                <div className='flex gap-2'>
+                  <div>{node.data?.name}</div>
+                </div>
+              )}
+            />
+          </DialogSkeleton>
         </div>
 
         <DialogFooter>