perf: update panel

src/components/Table/InfoCardTable/Panel.vue

@@ -2,8 +2,11 @@
   <div class="info-panel">
     <div class="panel-header">
       <div class="panel-title">
-        <el-avatar :src="imageUrl" />
-        <span>{{ object.name }}</span>
+        <el-avatar :src="imageUrl" shape="square" />
+        <div class="title-display">
+          <span class="name">{{ object.name }}</span>
+          <small class="comment">{{ object.provider.label }}</small>
+        </div>
       </div>
       <div
         v-if="iActions.length !== 0"
@@ -113,6 +116,9 @@ export default {
       return Array.from(mergedActions.values())
     }
   },
+  mounted() {
+    // console.log('Object: ', this.object)
+  },
   methods: {
     isDisabled(action) {
       const app = this.tableConfig.permissions?.app
@@ -147,13 +153,14 @@ export default {
 
 <style lang="scss" scoped>
 
-.info-panel {
+div.info-panel {
   display: flex;
   flex-direction: column;
+  gap: 10px;
 
   .panel-header {
-    padding: 5px 10px;
-    border-bottom: solid 1px #e7eaec;
+    padding: 10px 20px;
+    //border-bottom: solid 1px #e7eaec;
     display: flex;
     justify-content: space-between;
     gap: 10px;
@@ -163,10 +170,22 @@ export default {
       display: flex;
       align-items: center;
       font-weight: 600;
+      gap: 10px;
+
+      .title-display {
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+
+        .comment {
+          color: #62686c;
+          font-weight: 300;
+        }
+      }
 
       ::v-deep {
         .el-avatar {
-          background: white;
+          background: #fff;
         }
       }
     }
@@ -189,7 +208,7 @@ export default {
 
   .panel-content {
     display: block;
-    padding: 10px 30px;
+    padding: 1px 25px 10px;
     cursor: pointer;
 
     .panel-image {

src/components/Table/ListTable/TableAction/ImportTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="tableFilter">
-      <el-radio-group v-model="importStatusFilter" size="small">
+      <el-radio-group v-model="importStatusFilter" size="mini">
         <el-radio-button label="all">{{ $t('Total') }}: {{ totalCount }}</el-radio-button>
         <el-radio-button label="ok">{{ $t('Success') }}: {{ successCount }}</el-radio-button>
         <el-radio-button label="error">{{ $t('Failed') }}: {{ failedCount }}</el-radio-button>
@@ -13,7 +13,7 @@
     </div>
     <DataTable v-if="tableGenDone" id="importTable" ref="dataTable" :config="tableConfig" class="importTable" />
     <div class="row" style="padding-top: 20px">
-      <div class="btn-groups" style="float: right">
+      <div class="btn-groups">
         <el-button v-if="showCancel" size="small" @click="performCancel">{{ $t('Cancel') }}</el-button>
         <el-button
           v-show="!disableImportBtn"
@@ -27,8 +27,8 @@
           v-for="button in moreButtons"
           v-show="!button.hidden"
           :key="button.title"
-          :loading="button.loading"
           :disabled="disableImportBtn"
+          :loading="button.loading"
           size="small"
           v-bind="button"
           @click="handleClick(button)"

src/views/assets/Cloud/Account/components/AuthPanel.vue

@@ -215,6 +215,7 @@ export default {
     form {
       margin-right: 0;
       padding-right: 0;
+      padding-bottom: 10px;
     }
   }
 }

src/views/assets/Cloud/Account/components/CreateDialog.vue

@@ -123,11 +123,12 @@ export default {
 }
 
 .right-content {
-  background-color: #fff;
+  //background-color: #fff;
 
   ::v-deep {
     .el-form {
-      padding: 20px 20px 20px 10px
+      padding: 20px 20px 20px 10px;
+      background: #fff;
     }
   }
 }