各模块样式等布局优化，运行分析接口联调

web/src/views/system/role.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="role">
-    <searchBox
-      :btn-option-list="btnOptionList"
-      @onSearch="onSearch"
-      @operateForm="operateForm"
-    ></searchBox>
+    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
 
     <div class="content-table">
       <ComTable
@@ -16,7 +12,7 @@
         :page-option="pageOption"
       >
         <template #is_open="record">
-           <!-- 0:禁用; 1:启用 -->
+          <!-- 0:禁用; 1:启用 -->
           <a-tag :color="record.is_open == 0 ? 'red' : 'green'">{{
             record.is_open == 0 ? '禁用' : '启用'
           }}</a-tag>
@@ -31,7 +27,13 @@
         </template>
       </ComTable>
     </div>
-    <a-modal v-model:open="formModal" width="950px" style="top: 20px" :footer="null" :destroy-on-close="true">
+    <a-modal
+      v-model:open="formModal"
+      width="950px"
+      style="top: 20px"
+      :footer="null"
+      :destroy-on-close="true"
+    >
       <!-- action:edit add -->
       <EditCom
         :show-flag="formModal"
@@ -75,8 +77,8 @@ export default {
       btnOptionList: [],
       paramsDate: {},
       tableOption: {
-        select:false
-      },
+        select: false
+      }
     }
   },
   computed: {},
@@ -143,9 +145,9 @@ export default {
             ...item,
             key: item.permission_id,
             is_add: Boolean(+item.is_add) || false,
-            is_del: Boolean(+item.is_del )|| false,
-            is_edit: Boolean(+item.is_edit )|| false,
-            is_view: Boolean(+item.is_view )|| false,
+            is_del: Boolean(+item.is_del) || false,
+            is_edit: Boolean(+item.is_edit) || false,
+            is_view: Boolean(+item.is_view) || false,
             // 确保子权限容器存在
             children: item.children ? [...item.children] : []
           }
@@ -194,10 +196,10 @@ export default {
     },
     calculateParentPermissions(node) {
       if (node.children?.length) {
-        node.is_view = node.children.some((child) => child.is_view === '1') ? true:false
-        node.is_add = node.children.some((child) => child.is_add === '1') ? true:false
-        node.is_edit = node.children.some((child) => child.is_edit === '1') ? true:false
-        node.is_del = node.children.some((child) => child.is_del === '1') ? true:false
+        node.is_view = node.children.some((child) => child.is_view === '1') ? true : false
+        node.is_add = node.children.some((child) => child.is_add === '1') ? true : false
+        node.is_edit = node.children.some((child) => child.is_edit === '1') ? true : false
+        node.is_del = node.children.some((child) => child.is_del === '1') ? true : false
       }
     },
     async getPermissionList() {
@@ -243,7 +245,7 @@ export default {
         is_add: data ? Boolean(+data.is_add) : false,
         is_del: data ? Boolean(+data.is_del) : false,
         is_edit: data ? Boolean(+data.is_edit) : false,
-        is_view: data ? Boolean(+data.is_view ): false
+        is_view: data ? Boolean(+data.is_view) : false
       }
     },
     operateForm(type, record = {}) {
@@ -295,13 +297,11 @@ export default {
             callback()
           }
         },
-        onCancel() {
-        },
+        onCancel() {},
         class: 'test'
       })
     },
     async getRuleFormInfo(record) {
-      
       function getInfo(data, url) {
         return new Promise((reslove, reject) => {
           getReq(data, url).then((res) => {
@@ -320,16 +320,16 @@ export default {
         perList,
         record && record.permission.length ? record.permission : []
       )
-      const newData=JSON.parse(JSON.stringify( this.processedData))
-      
+      const newData = JSON.parse(JSON.stringify(this.processedData))
+
       roleOptions.forEach((e, index) => {
         e.list.forEach((i) => {
           if (i.key == 'permission') {
             i.tableData = newData
-            if(record&&record.role_id){
-              i.selectTableData=this.extractAllIds( record.permission)
-            }else {
-              i.selectTableData=[]
+            if (record && record.role_id) {
+              i.selectTableData = this.extractAllIds(record.permission)
+            } else {
+              i.selectTableData = []
             }
           } else {
             e.ruleForm[i.key] = row ? row[i.key] : ''
@@ -340,25 +340,25 @@ export default {
     },
     // 定义提取所有ID的函数
     extractAllIds(treeData) {
-      const idSet = new Set();
- 
+      const idSet = new Set()
+
       // 递归遍历函数
       const traverse = (node) => {
         // 添加当前节点ID
         if (node.permission_id) {
-          idSet.add(node.permission_id);
+          idSet.add(node.permission_id)
         }
- 
+
         // 递归处理子节点
         if (node.children && node.children.length > 0) {
-          node.children.forEach((child) => traverse(child));
+          node.children.forEach((child) => traverse(child))
         }
-      };
- 
+      }
+
       // 处理所有根节点
-      treeData.forEach((node) => traverse(node));
- 
-      return Array.from(idSet);
+      treeData.forEach((node) => traverse(node))
+
+      return Array.from(idSet)
     },
     handlePagesizeChange(pageOption) {
       this.pageOption.pageSize = pageOption.pageSize
@@ -373,9 +373,9 @@ export default {
 .role {
   height: 100%;
 
+  padding: 0 20px;
   .content-table {
-    height: calc(100% - 70px);
-    padding: 10px;
+    height: calc(100% - 92px);
   }
 }
 </style>