feat(仪表板):UI fix

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%;

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>

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{

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>

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>

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>

frontend/src/views/panel/list/PanelMain.vue

 <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-header>>>.el-tabs__nav-scroll{
-    padding-left: 0!important;
+  .tab-panel>>>.el-tabs__nav-wrap::after {
+    height: 1px;
   }
-
 </style>

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 {

frontend/src/views/panel/list/SaveToTemplate.vue

 <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>