From 4535dd2a5e9b95c656d497fff1b9a08f1e404f8d Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Tue, 18 May 2021 15:20:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(dashboard):ui=20fix;=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E4=B8=80=E7=BA=A7=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/panel/enshrine/index.vue   |  3 +-
 .../src/views/panel/list/EditPanel/index.vue  | 16 +++++-----
 frontend/src/views/panel/list/PanelList.vue   | 29 ++++++++++++++++---
 .../src/views/panel/list/PanelViewShow.vue    |  2 +-
 4 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/panel/enshrine/index.vue b/frontend/src/views/panel/enshrine/index.vue
index 09be5a705a..7e944638c5 100644
--- a/frontend/src/views/panel/enshrine/index.vue
+++ b/frontend/src/views/panel/enshrine/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <el-table
-
       class="de-filter-data-table"
       :data="starDatas"
       :show-header="false"
@@ -52,7 +51,7 @@ export default {
       })
     },
     resetID(data) {
-      if( data ) {
+      if (data) {
         data.forEach(item => {
           item.id = uuid.v1()
         })
diff --git a/frontend/src/views/panel/list/EditPanel/index.vue b/frontend/src/views/panel/list/EditPanel/index.vue
index d745f4de30..61cedb914e 100644
--- a/frontend/src/views/panel/list/EditPanel/index.vue
+++ b/frontend/src/views/panel/list/EditPanel/index.vue
@@ -2,17 +2,17 @@
   <el-row>
     <el-row v-if="editPanel.optType==='new' && editPanel.panelInfo.nodeType==='panel'">
       <el-col :span="18" style="height: 40px">
-        <el-radio v-model="inputType" label="self"> {{ $t(panel.custom) }}</el-radio>
-        <el-radio v-model="inputType" label="import">{{ $t(panel.import_template) }}  </el-radio>
-        <el-radio v-model="inputType" label="copy">{{ $t(panel.copy_template) }}  </el-radio>
+        <el-radio v-model="inputType" label="self"> {{ $t('panel.custom') }}</el-radio>
+        <el-radio v-model="inputType" label="import">{{ $t('panel.import_template') }}  </el-radio>
+        <el-radio v-model="inputType" label="copy">{{ $t('panel.copy_template') }}  </el-radio>
       </el-col>
       <el-col v-if="inputType==='import'" :span="6">
-        <el-button class="el-icon-upload" size="small" type="primary" @click="goFile">{{ $t(panel.upload_template) }}</el-button>
+        <el-button class="el-icon-upload" size="small" type="primary" @click="goFile">{{ $t('panel.upload_template') }}</el-button>
         <input id="input" ref="files" type="file" accept=".DE" hidden @change="handleFileChange">
       </el-col>
     </el-row>
     <el-row style="margin-top: 5px">
-      <el-col :span="4">{{ editPanel.titleSuf }} {{ $t(commons.name) }}</el-col>
+      <el-col :span="4">{{ editPanel.titleSuf }} {{ $t('commons.name') }}</el-col>
       <el-col :span="20">
         <el-input v-model="editPanel.panelInfo.name" clearable size="mini" />
       </el-col>
@@ -25,8 +25,8 @@
     </el-row>
     <el-row v-if="inputType==='import'" class="preview" :style="classBackground" />
     <el-row class="root-class">
-      <el-button @click="cancel()">{{ $t(commons.cancel) }}</el-button>
-      <el-button type="primary" @click="save()">{{ $t(commons.confirm) }}</el-button>
+      <el-button @click="cancel()">{{ $t('commons.cancel') }}</el-button>
+      <el-button type="primary" @click="save()">{{ $t('commons.confirm') }}</el-button>
     </el-row>
   </el-row>
 </template>
@@ -101,7 +101,7 @@ export default {
     },
     save() {
       if (!this.editPanel.panelInfo.name) {
-        this.$warning( this.$t('commons.name_can_not_empty'))
+        this.$warning(this.$t('chart.name_can_not_empty'))
         return false
       }
       panelSave(this.editPanel.panelInfo).then(response => {
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 26d7362113..d336d589ba 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -1,5 +1,5 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
-  <el-col>
+  <el-col style="padding: 0 10px 0 10px;">
     <!-- panel list -->
     <el-col>
       <el-row>
@@ -28,7 +28,10 @@
       </el-row>
 
       <el-row>
-        <span class="header-title">{{ $t('panel.panel') }}</span>
+        <span class="header-title">
+          {{ $t('panel.panel') }}
+          <el-button style="float: right;padding-right: 7px;" type="text" icon="el-icon-circle-plus" @click="showEditPanel(newFolder)" />
+        </span>
       </el-row>
       <el-col class="custom-tree-container">
         <div class="block">
@@ -92,7 +95,7 @@
                         {{ $t('panel.edit') }}
                       </el-dropdown-item>
                       <el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-paperclip" :command="beforeClickMore('link',data,node)">
-                       {{ $t('panel.create_public_links') }}
+                        {{ $t('panel.create_public_links') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
@@ -248,6 +251,16 @@ export default {
           panelData: '[]'
         }
       },
+      newFolder: {
+        type: 'folder',
+        data: {
+          id: null,
+          pid: null,
+          level: 0
+        },
+        node: {},
+        optType: 'newFirstFolder'
+      },
       linkTitle: '链接分享',
       linkVisible: false,
       linkResourceId: null,
@@ -319,6 +332,12 @@ export default {
           this.editPanel.panelInfo.pid = param.data.id
           this.editPanel.panelInfo.level = param.data.level + 1
           break
+        case 'newFirstFolder':
+          this.editPanel.titlePre = this.$t('commons.create')
+          this.editPanel.panelInfo.name = ''
+          this.editPanel.panelInfo.pid = null
+          this.editPanel.panelInfo.level = 0
+          break
         case 'edit':
         case 'rename':
           this.editPanel.titlePre = this.$t('commons.edit')
@@ -525,7 +544,9 @@ export default {
     flex: 1;
     color: #606266;
     font-weight: bold;
-
+    display: block;
+    height: 100%;
+    line-height: 36px;
   }
 
   .el-divider--horizontal {
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index cb51f0a28e..815a86ef0d 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -27,7 +27,7 @@
         </span>
 
         <span v-if="hasStar && panelInfo" style="float: right;margin-right: 10px">
-          <el-tooltip :content="$t('commons.cancle')">
+          <el-tooltip :content="$t('commons.cancel')">
             <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
           </el-tooltip>
         </span>