From 07a8b82914afebd2a44d73f2fbe233899e92d4f4 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 27 May 2021 17:34:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):UI=20fix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/Preview.vue      |  2 +-
 .../src/views/panel/GrantAuth/dept/index.vue  |  4 +++
 frontend/src/views/panel/GrantAuth/index.vue  |  6 ++--
 .../src/views/panel/GrantAuth/role/index.vue  |  3 ++
 .../src/views/panel/GrantAuth/user/index.vue  |  3 ++
 frontend/src/views/panel/list/PanelList.vue   | 16 +++++++++--
 frontend/src/views/panel/list/PanelMain.vue   | 28 ++++++++++---------
 .../src/views/panel/list/PanelViewShow.vue    | 10 +++----
 .../src/views/panel/list/SaveToTemplate.vue   |  6 ++--
 9 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 80ec62a8d4..42fbc95b8f 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -144,7 +144,7 @@ export default {
     min-height: 300px;
     width: 100%;
     height: 100%;
-    border: 1px solid #E6E6E6;
+    /*border: 1px solid #E6E6E6;*/
     background-size: 100% 100% !important;
     .canvas-container {
         width: 100%;
diff --git a/frontend/src/views/panel/GrantAuth/dept/index.vue b/frontend/src/views/panel/GrantAuth/dept/index.vue
index 7aa798bee4..fda8be7ebc 100644
--- a/frontend/src/views/panel/GrantAuth/dept/index.vue
+++ b/frontend/src/views/panel/GrantAuth/dept/index.vue
@@ -229,4 +229,8 @@ export default {
   /* 去除下边框 */
   height: 0;
 }
+
+.my_table>>>.el-table-column--selection .cell{
+  text-align: center;
+}
 </style>
diff --git a/frontend/src/views/panel/GrantAuth/index.vue b/frontend/src/views/panel/GrantAuth/index.vue
index 652f15e7ec..6b3134822d 100644
--- a/frontend/src/views/panel/GrantAuth/index.vue
+++ b/frontend/src/views/panel/GrantAuth/index.vue
@@ -72,14 +72,14 @@ export default {
 <style lang="scss" scoped>
 .de-tab {
     border:1px solid #E6E6E6;
-    min-height:200px !important;
-    max-height:300px !important;
+    min-height:400px !important;
+    max-height:400px !important;
     overflow:auto;
 }
 .de-icon {
     position: absolute;
     right: 20px;
-    top: 50px;
+    top: 70px;
     z-index: 99;
 }
 .el-input-group__append{
diff --git a/frontend/src/views/panel/GrantAuth/role/index.vue b/frontend/src/views/panel/GrantAuth/role/index.vue
index 5bc0429948..88714d865d 100644
--- a/frontend/src/views/panel/GrantAuth/role/index.vue
+++ b/frontend/src/views/panel/GrantAuth/role/index.vue
@@ -143,4 +143,7 @@ export default {
   /* 去除下边框 */
   height: 0;
 }
+.my_table>>>.el-table-column--selection .cell{
+  text-align: center;
+}
 </style>
diff --git a/frontend/src/views/panel/GrantAuth/user/index.vue b/frontend/src/views/panel/GrantAuth/user/index.vue
index 1329b36988..f83da1ddfb 100644
--- a/frontend/src/views/panel/GrantAuth/user/index.vue
+++ b/frontend/src/views/panel/GrantAuth/user/index.vue
@@ -152,4 +152,7 @@ export default {
   /* 去除下边框 */
   height: 0;
 }
+.my_table>>>.el-table-column--selection .cell{
+  text-align: center;
+}
 </style>
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index ca8bc155da..ac7ac60307 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -132,7 +132,7 @@
         </div>
       </el-col>
 
-      <el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
+      <el-dialog v-dialogDrag :title="dialogTitle" :visible="editGroup" :show-close="false" width="500px">
         <el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
           <el-form-item :label="$t('commons.name')" prop="name">
             <el-input v-model="groupForm.name" />
@@ -146,14 +146,17 @@
       </el-dialog>
 
       <el-dialog
+        v-dialogDrag
         :title="authTitle"
         :visible.sync="authVisible"
-        custom-class="de-dialog"
+        width="500px"
+        class="dialog-css"
       >
         <grant-auth v-if="authVisible" :resource-id="authResourceId" @close-grant="closeGrant" />
       </el-dialog>
 
       <el-dialog
+        v-dialogDrag
         :title="linkTitle"
         :visible.sync="linkVisible"
         width="500px"
@@ -162,7 +165,7 @@
         <link-generate v-if="linkVisible" :resource-id="linkResourceId" />
       </el-dialog>
       <!--新建仪表盘dialog-->
-      <el-dialog :title="panelDialogTitle" :visible.sync="editPanel.visible" :show-close="true" width="600px">
+      <el-dialog v-dialogDrag :title="panelDialogTitle" :visible.sync="editPanel.visible" :show-close="true" width="600px">
         <edit-panel v-if="editPanel.visible" :edit-panel="editPanel" @closeEditPanelDialog="closeEditPanelDialog" @newPanelSave="newPanelSave" />
       </el-dialog>
     </el-col>
@@ -686,4 +689,11 @@ export default {
     padding:0 8px;
   }
 
+  .dialog-css>>>.el-dialog__body {
+    padding: 15px 20px;
+  }
+  .dialog-css >>>.el-dialog__body {
+    padding: 10px 20px 20px;
+  }
+
 </style>
diff --git a/frontend/src/views/panel/list/PanelMain.vue b/frontend/src/views/panel/list/PanelMain.vue
index 46bf670826..73ef176e0e 100644
--- a/frontend/src/views/panel/list/PanelMain.vue
+++ b/frontend/src/views/panel/list/PanelMain.vue
@@ -1,7 +1,7 @@
 <template>
   <de-container>
     <de-aside-container>
-      <el-tabs v-model="activeName" class="tab-header" @tab-click="handleClick" type="card" :stretch="true">
+      <el-tabs v-model="activeName" class="tab-panel" :stretch="true" @tab-click="handleClick">
         <el-tab-pane name="PanelList">
           <span slot="label"><i class="el-icon-document" />{{ $t('panel.panel_list') }}</span>
           <panel-list />
@@ -83,18 +83,20 @@ export default {
     padding: 0px;
   }
 
-  .tab-header>>>.el-tabs__item{
-    font-size: 13px;
-    background-color: #E8EAED;
-    padding: 0 15px;
+  /*.tab-panel>>>.is-stretch{*/
+  /*  min-width: 80% !important;*/
+  /*}*/
+  /*.tab-panel>>>.el-tabs__nav-scroll {*/
+  /*  overflow: hidden;*/
+  /*  text-align: center;*/
+  /*  display: flex;*/
+  /*  align-items: center;*/
+  /*  justify-content: center;*/
+  /*}*/
+  .tab-panel>>>.el-tabs__nav-wrap{
+    padding: 0 10px;
   }
-
-  .tab-header>>>.is-active{
-    background-color: #ffffff;
-    border-bottom-color: #ffffff!important;
+  .tab-panel>>>.el-tabs__nav-wrap::after {
+    height: 1px;
   }
-  .tab-header>>>.el-tabs__nav-scroll{
-    padding-left: 0!important;
-  }
-
 </style>
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index b1360921a3..d3a75840bf 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -2,7 +2,7 @@
   <el-row style="height: 100%;width: 100%;">
     <el-col v-if="panelInfo.name.length>0" class="panel-design">
       <el-row class="panel-design-head">
-        <!--TODO 仪表盘头部区域-->
+        <!--仪表盘头部区域-->
         <el-col :span="12" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
           <span>{{ panelInfo.name || '测试仪表板' }}</span>
         </el-col>
@@ -37,7 +37,7 @@
         </el-col>
 
       </el-row>
-      <!--TODO 仪表盘预览区域-->
+      <!-- 仪表盘预览区域-->
       <el-row class="panel-design-preview">
         <div ref="imageWrapper" style="width: 100%;height: 100%">
           <Preview v-if="showMain" />
@@ -54,7 +54,7 @@
       v-if="templateSaveShow"
       :title="templateSaveTitle"
       :visible.sync="templateSaveShow"
-      custom-class="de-dialog"
+      width="500px"
     >
       <save-to-template :template-info="templateInfo" @closeSaveDialog="closeSaveDialog" />
     </el-dialog>
@@ -219,6 +219,7 @@ export default {
     background-color: white;
     padding: 0 6px;
     line-height: 40px;
+    border-bottom: 1px solid #dfe4ed;
   }
 
   .panel-design-preview {
@@ -226,8 +227,7 @@ export default {
     height: calc(100% - 40px);
     overflow-x: hidden;
     overflow-y: auto;
-    padding: 5px;
-    border-top: 1px solid #E6E6E6;
+    /*padding: 5px;*/
   }
 
   .custom-position {
diff --git a/frontend/src/views/panel/list/SaveToTemplate.vue b/frontend/src/views/panel/list/SaveToTemplate.vue
index 2a1350f6a1..ebc4037974 100644
--- a/frontend/src/views/panel/list/SaveToTemplate.vue
+++ b/frontend/src/views/panel/list/SaveToTemplate.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row>
-    <el-row>
+    <el-row style="display: flex;align-items: center;">
       <el-col :span="4"> {{ $t('panel.template_nale') }}</el-col>
       <el-col :span="20">
         <el-input v-model="templateInfo.name" clearable size="mini" />
@@ -26,8 +26,8 @@
       </div>
     </el-row>
     <el-row class="root-class">
-      <el-button @click="cancel()">{{ $t('commons.cancel') }}</el-button>
-      <el-button type="primary" @click="save()">{{ $t('commons.save') }}</el-button>
+      <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
+      <el-button size="mini" type="primary" @click="save()">{{ $t('commons.save') }}</el-button>
     </el-row>
   </el-row>
 </template>