fix(系统设置): 修改插件删除和部分styles调整

frontend/src/views/setting/system/pluginManager/components/pluginTable.vue

@@ -25,7 +25,7 @@
         <a-table
           :data="filterData"
           :pagination="false"
-          :scroll="{ y: 500, x: 2400 }"
+          :scroll="{ y: 480, x: 2400 }"
           :expandable="expandable"
           :loading="loading"
           row-key="id"
@@ -33,7 +33,7 @@
           @expand="handleExpand"
         >
           <template #columns>
-            <a-table-column fixed="left" :title="t('system.plugin.tableColunmName')">
+            <a-table-column :width="300" fixed="left" :title="t('system.plugin.tableColunmName')" :ellipsis="true">
               <template #cell="{ record }">
                 {{ record.name }} <span class="text-[--color-text-4]">({{ (record.pluginForms || []).length }})</span>
               </template>
@@ -79,8 +79,18 @@
                 </a-tooltip>
               </template>
             </a-table-column>
-            <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="fileName" />
-            <a-table-column :title="t('system.plugin.tableColunmVersion')" data-index="pluginId" />
+            <a-table-column
+              :title="t('system.plugin.tableColunmDescription')"
+              data-index="fileName"
+              :width="300"
+              :ellipsis="true"
+            />
+            <a-table-column
+              :title="t('system.plugin.tableColunmVersion')"
+              data-index="pluginId"
+              :width="300"
+              :ellipsis="true"
+            />
             <a-table-column :title="t('system.plugin.tableColunmAuthorization')">
               <template #cell="{ record }">
                 <span>{{
@@ -89,7 +99,7 @@
               </template>
             </a-table-column>
             <a-table-column :title="t('system.plugin.tableColunmCreatedBy')" data-index="createUser" />
-            <a-table-column :title="t('system.plugin.tableColunmUpdateTime')">
+            <a-table-column :title="t('system.plugin.tableColunmUpdateTime')" :width="200">
               <template #cell="{ record }">
                 <span>{{ getTime(record.updateTime) }}</span>
               </template>
@@ -246,7 +256,7 @@
       },
       onBeforeOk: async () => {
         try {
-          deletePluginReq(record.id);
+          await deletePluginReq(record.id);
           Message.success(t('system.plugin.deletePluginSuccess'));
           loadData();
         } catch (error) {
@@ -373,6 +383,7 @@
 
 <style scoped lang="less">
   :deep(.arco-table-tr-expand .arco-table-td) {
+    padding: 0;
     background: none;
   }
   :deep(.arco-table-tr-expand .arco-table-cell) {
@@ -386,14 +397,20 @@
   :deep(.collapsebtn) {
     padding: 0 1px;
     border: 1px solid var(--color-text-4);
+    border-radius: 3px;
     @apply bg-white;
   }
   :deep(.expand) {
     padding: 0 1px;
     border: 1px solid rgb(var(--primary-5));
+    border-radius: 3px;
     @apply bg-white;
   }
   :deep(.arco-table-expand-btn) {
+    width: 16px;
+    height: 16px;
+    border-width: 2px;
+    border-radius: 3px;
     @apply bg-white;
   }
   .ms-footerNum {
@@ -405,4 +422,10 @@
     height: calc(100vh - 236px);
     min-height: 400px;
   }
+  :deep(.arco-table-tr .arco-table-td) {
+    height: 54px !important;
+  }
+  .ms-table-expand :deep(.arco-scrollbar-container + .arco-scrollbar-track-direction-vertical) {
+    left: 0 !important;
+  }
 </style>

frontend/src/views/setting/system/pluginManager/components/tableExpand.vue

@@ -2,8 +2,8 @@
   <a-scrollbar
     :style="{
       'overflow': 'auto',
-      'min-height': '40px',
-      'max-height': '120px',
+      'min-height': '54px',
+      'max-height': '270px',
     }"
   >
     <div class="ms-scroll">
@@ -44,8 +44,8 @@
     padding: 0 !important;
   }
   .ms-self {
-    height: 40px;
-    line-height: 40px;
+    height: 54px;
+    line-height: 54px;
     border-bottom: 1px solid var(--color-text-n8);
     @apply flex items-center align-middle leading-6;
   }

frontend/src/views/setting/system/pluginManager/index.vue

@@ -1,7 +1,8 @@
 /* stylelint-disable order/properties-order */
 <template>
   <MsCard simple>
-    <a-alert :closable="true">
+    <div class="wrapper flex flex-col justify-between">
+      <a-alert :closable="true" class="mb-4">
         <div>
           {{ t('system.plugin.alertDescribe') }}
           <a class="mx-1" href="javascript:;">{{ t('system.plugin.viewTable') }}</a
@@ -9,7 +10,6 @@
           <a class="mx-1" href="https://github.com/metersphere" target="_blank">{{ t('system.plugin.goDownload') }} </a>
         </div>
       </a-alert>
-    <div class="mt-4">
       <pluginTable />
     </div>
   </MsCard>
@@ -27,4 +27,7 @@
   a {
     color: rgb(var(--primary-5));
   }
+  .wrapper {
+    width: 100%;
+  }
 </style>