modify

src/views/system/role/index.vue

@@ -143,7 +143,7 @@
                   class="permission-tree"
                 >
                   <template #default="{ node, data }">
-                    <span style="display: flex; align-items: center; gap: 8px">
+                    <span style="display: flex; gap: 8px; align-items: center">
                       <span>{{ node.label }}</span>
                       <ElTag :type="data.perm_type === 1 ? 'info' : 'success'" size="small">
                         {{ data.perm_type === 1 ? '菜单' : '按钮' }}
@@ -519,7 +519,7 @@
     }
 
     // 检查所有顶层节点
-    availablePermissions.value.forEach(node => checkNode(node))
+    availablePermissions.value.forEach((node) => checkNode(node))
 
     return Array.from(parentIdsToHalfCheck)
   }
@@ -568,7 +568,8 @@
         label: node.perm_name,
         perm_type: node.perm_type,
         status: node.status ?? 1,
-        children: node.children && node.children.length > 0 ? buildTreeData(node.children) : undefined
+        children:
+          node.children && node.children.length > 0 ? buildTreeData(node.children) : undefined
       }))
   }
 
@@ -692,7 +693,11 @@
     const parentIds: number[] = []
 
     // 在原始权限树中递归查找父节点
-    const findInTree = (treeNodes: PermissionTreeNode[], targetId: number, parentId?: number): number | null => {
+    const findInTree = (
+      treeNodes: PermissionTreeNode[],
+      targetId: number,
+      parentId?: number
+    ): number | null => {
       for (const node of treeNodes) {
         if (node.id === targetId) {
           return parentId || null
@@ -727,7 +732,7 @@
     // 为每个勾选的节点找到所有父节点
     checkedKeys.forEach((key: number) => {
       const parents = getParentNodeIds(key)
-      parents.forEach(parentId => allIds.add(parentId))
+      parents.forEach((parentId) => allIds.add(parentId))
     })
 
     return Array.from(allIds)
@@ -1079,8 +1084,8 @@
 
   .dialog-header {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    justify-content: space-between;
     width: 100%;
 
     .dialog-title {
@@ -1090,8 +1095,8 @@
 
     .role-info {
       display: flex;
-      align-items: center;
       gap: 8px;
+      align-items: center;
 
       .role-name {
         font-size: 14px;
@@ -1102,25 +1107,25 @@
 
   .permission-tree-transfer-container {
     display: flex;
-    justify-content: space-between;
-    align-items: stretch;
     gap: 20px;
-    padding: 20px 0;
+    align-items: stretch;
+    justify-content: space-between;
     min-height: 500px;
+    padding: 20px 0;
 
     .transfer-panel {
-      flex: 1;
       display: flex;
+      flex: 1;
       flex-direction: column;
+      max-width: 340px;
+      overflow: hidden;
       border: 1px solid var(--el-border-color);
       border-radius: 4px;
-      overflow: hidden;
-      max-width: 340px;
 
       .panel-header {
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
         padding: 12px 16px;
         background: var(--el-fill-color-light);
         border-bottom: 1px solid var(--el-border-color);
@@ -1134,8 +1139,8 @@
 
       .panel-body {
         flex: 1;
-        overflow-y: auto;
         padding: 12px;
+        overflow-y: auto;
 
         .permission-tree {
           :deep(.el-tree-node) {
@@ -1144,8 +1149,8 @@
 
           :deep(.el-tree-node__content) {
             height: 36px;
-            line-height: 36px;
             padding-right: 8px;
+            line-height: 36px;
           }
 
           :deep(.el-tree-node__label) {
@@ -1162,16 +1167,16 @@
 
           .tree-node-content {
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
             gap: 8px;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
 
             .tree-node-label {
-              flex: 1;
               display: flex;
-              align-items: center;
+              flex: 1;
               gap: 8px;
+              align-items: center;
             }
 
             .el-button {
@@ -1186,9 +1191,9 @@
     .transfer-buttons {
       display: flex;
       flex-direction: column;
-      justify-content: center;
-      align-items: center;
       gap: 12px;
+      align-items: center;
+      justify-content: center;
       padding: 0 10px;
 
       .el-button {