From eaba620fde4ff83d1b20e52f2b6998e78b2f5eef Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Fri, 11 Aug 2023 16:57:10 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8F=92=E4=BB=B6=E5=88=A0=E9=99=A4=E5=92=8C?=
 =?UTF-8?q?=E9=83=A8=E5=88=86styles=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pluginManager/components/pluginTable.vue  | 35 +++++++++++++++----
 .../pluginManager/components/tableExpand.vue  |  8 ++---
 .../setting/system/pluginManager/index.vue    | 21 ++++++-----
 3 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue b/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
index 55151e8a25..15a53e159b 100644
--- a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
+++ b/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>
diff --git a/frontend/src/views/setting/system/pluginManager/components/tableExpand.vue b/frontend/src/views/setting/system/pluginManager/components/tableExpand.vue
index 5365ccafb4..cfe9c3eedf 100644
--- a/frontend/src/views/setting/system/pluginManager/components/tableExpand.vue
+++ b/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;
   }
diff --git a/frontend/src/views/setting/system/pluginManager/index.vue b/frontend/src/views/setting/system/pluginManager/index.vue
index b404517878..702fc95476 100644
--- a/frontend/src/views/setting/system/pluginManager/index.vue
+++ b/frontend/src/views/setting/system/pluginManager/index.vue
@@ -1,15 +1,15 @@
 /* stylelint-disable order/properties-order */
 <template>
   <MsCard simple>
-    <a-alert :closable="true">
-      <div>
-        {{ t('system.plugin.alertDescribe') }}
-        <a class="mx-1" href="javascript:;">{{ t('system.plugin.viewTable') }}</a
-        >{{ t('system.plugin.downAddress') }}
-        <a class="mx-1" href="https://github.com/metersphere" target="_blank">{{ t('system.plugin.goDownload') }} </a>
-      </div>
-    </a-alert>
-    <div class="mt-4">
+    <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
+          >{{ t('system.plugin.downAddress') }}
+          <a class="mx-1" href="https://github.com/metersphere" target="_blank">{{ t('system.plugin.goDownload') }} </a>
+        </div>
+      </a-alert>
       <pluginTable />
     </div>
   </MsCard>
@@ -27,4 +27,7 @@
   a {
     color: rgb(var(--primary-5));
   }
+  .wrapper {
+    width: 100%;
+  }
 </style>