fix: BUG FIX

e09484a2 · wangjiahao · f6f668ca · e09484a2 · e09484a2 · e09484a2
--- a/frontend/src/icons/svg/folder.svg
+++ b/frontend/src/icons/svg/folder.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621433652678" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2364" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M930.668 386.638c-16.798 0-30.422-13.62-30.422-30.422V175.75c0-13.782-11.216-24.994-24.998-24.994H574.898c-16.798 0-30.422-13.62-30.422-30.422s13.622-30.422 30.422-30.422h300.352c47.334 0 85.842 38.508 85.842 85.838v180.466c-0.002 16.802-13.624 30.422-30.424 30.422z" fill="#2D527C" p-id="2365"></path><path d="M941.828 965.542H82.172C36.862 965.542 0 928.682 0 883.372V143.92c0-47.124 38.338-85.462 85.462-85.462h251.608c47.124 0 85.462 38.338 85.462 85.462v74.936h519.298c45.31 0 82.172 36.862 82.172 82.17 0 16.802-13.622 30.422-30.422 30.422s-30.422-13.62-30.422-30.422c0-11.758-9.568-21.326-21.328-21.326h-549.72c-16.798 0-30.422-13.62-30.422-30.422V143.92c0-13.574-11.044-24.618-24.618-24.618H85.462c-13.574 0-24.618 11.044-24.618 24.618v739.452c0 11.758 9.568 21.326 21.328 21.326h859.654c16.798 0 30.422 13.62 30.422 30.422 0.002 16.802-13.622 30.422-30.42 30.422z" fill="#2D527C" p-id="2366"></path><path d="M993.576 769.22V301.028c0-28.578-23.17-51.748-51.748-51.748h-549.72V143.92c0-30.398-24.642-55.04-55.04-55.04H85.462c-30.398 0-55.04 24.642-55.04 55.04v625.304h963.154v-0.004z" fill="#CEE8FA" p-id="2367"></path><path d="M993.578 799.642H30.422c-16.8 0-30.422-13.62-30.422-30.422V143.92c0-47.124 38.338-85.462 85.462-85.462h251.608c47.124 0 85.462 38.338 85.462 85.462v74.936h519.298c45.31 0 82.172 36.862 82.172 82.17v468.192c-0.002 16.804-13.624 30.424-30.424 30.424zM60.844 738.798h902.312V301.028c0-11.758-9.568-21.326-21.328-21.326h-549.72c-16.798 0-30.422-13.62-30.422-30.422V143.92c0-13.574-11.044-24.618-24.618-24.618H85.462c-13.574 0-24.618 11.044-24.618 24.618v594.878z" fill="#2D527C" p-id="2368"></path></svg>
\ No newline at end of file
--- a/frontend/src/icons/svg/panel.svg
+++ b/frontend/src/icons/svg/panel.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621433305409" class="icon" viewBox="0 0 1285 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2359" xmlns:xlink="http://www.w3.org/1999/xlink" width="250.9765625" height="200"><defs><style type="text/css"></style></defs><path d="M100.392157 70.27451A30.117647 30.117647 0 0 0 70.27451 100.392157v823.215686A30.117647 30.117647 0 0 0 100.392157 953.72549h1084.235294a30.117647 30.117647 0 0 0 30.117647-30.117647V100.392157A30.117647 30.117647 0 0 0 1184.627451 70.27451H100.392157z m0-60.235294h1084.235294A90.352941 90.352941 0 0 1 1274.980392 100.392157v823.215686a90.352941 90.352941 0 0 1-90.352941 90.352941H100.392157A90.352941 90.352941 0 0 1 10.039216 923.607843V100.392157A90.352941 90.352941 0 0 1 100.392157 10.039216z" fill="#0069F6" p-id="2360"></path><path d="M261.019608 261.019608m-60.235294 0a60.235294 60.235294 0 1 0 120.470588 0 60.235294 60.235294 0 1 0-120.470588 0Z" fill="#5ED7BC" p-id="2361"></path><path d="M331.294118 839.479216a30.117647 30.117647 0 0 1-60.235294 0 189.941961 189.941961 0 0 1 189.94196-189.941961h186.588863a102.460235 102.460235 0 0 0 98.484706-130.710588 162.695529 162.695529 0 0 1 156.370823-207.610981h241.141961a30.117647 30.117647 0 0 1 0 60.235294h-241.141961a102.460235 102.460235 0 0 0-98.464627 130.730667 162.695529 162.695529 0 0 1-156.390902 207.61098H461.000784a129.706667 129.706667 0 0 0-129.706666 129.706667z" fill="#5ED7BC" p-id="2362"></path></svg>
\ No newline at end of file
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
 <template>
  <el-row>
-    <el-row class="de-header">
+    <el-header class="de-header">
-      <span style="float: left;line-height: 35px; color: gray">
+      <el-col :span="8" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;color: #606266;font-size: 16px">
-        {{ $t('commons.name') }} ：{{ panelInfo.name || '测试仪表板' }}
+        <span style="line-height: 35px;">
-      </span>
+          {{ $t('commons.name') }} ：{{ panelInfo.name || '测试仪表板' }}
+        </span>
+      </el-col>
      <!--横向工具栏-->
-      <Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" />
+      <el-col :span="16">
-    </el-row>
+        <Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" />
-    <el-row>
+      </el-col>
+    </el-header>
+    <el-main style="padding: 0px">
      <de-container>
        <de-aside-container class="ms-aside-container">
          <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
@@ -66,7 +70,7 @@
          </div>
        </de-main-container>
      </de-container>
-    </el-row>
+    </el-main>
    <el-dialog
      v-if="filterVisible && panelInfo.id"

--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -13,14 +13,11 @@
            @node-click="nodeClick"
          >
            <span slot-scope="{ data }" class="custom-tree-node">
-              <span>
+              <span style="display: flex; flex: 1 1 0%; width: 0px;">
                <span>
-                  <el-button
+                  <svg-icon icon-class="scene" class="ds-icon-scene" />
-                    icon="el-icon-picture-outline"
-                    type="text"
-                  />
                </span>
-                <span style="margin-left: 6px">{{ data.name }}</span>
+                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
              </span>
            </span>
          </el-tree>
@@ -45,15 +42,15 @@
            :expand-on-click-node="true"
            @node-click="nodeClick"
          >
-            <span slot-scope="{ node, data }" class="custom-tree-node">
+            <span slot-scope="{ node, data }" class="custom-tree-node-list">
-              <span>
+              <span style="display: flex; flex: 1 1 0%; width: 0px;">
                <span v-if="data.nodeType === 'panel'">
-                  <el-button
+                  <svg-icon icon-class="panel" class="ds-icon-scene" />
-                    icon="el-icon-picture-outline"
-                    type="text"
-                  />
                </span>
-                <span style="margin-left: 6px">{{ data.name }}</span>
+                <span v-if="data.nodeType === 'folder'">
+                  <svg-icon icon-class="folder" class="ds-icon-scene" />
+                </span>
+                <span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
              </span>
              <span v-if="hasDataPermission('manage',data.privileges)">
                <span v-if="data.nodeType ==='folder'" @click.stop>
@@ -66,11 +63,11 @@
                      />
                    </span>
                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickEdit('folder','new',data,node)">
+                      <el-dropdown-item :command="beforeClickEdit('folder','new',data,node)">
-                        {{ $t('panel.groupAdd') }}
+                        <svg-icon icon-class="folder" class="ds-icon-scene" /> &nbsp <span>{{ $t('panel.groupAdd') }}</span>
                      </el-dropdown-item>
-                      <el-dropdown-item icon="el-icon-folder-add" :command="beforeClickEdit('panel','new',data,node)">
+                      <el-dropdown-item :command="beforeClickEdit('panel','new',data,node)">
-                        {{ $t('panel.panelAdd') }}
+                        <svg-icon icon-class="panel" class="ds-icon-scene" /> &nbsp <span>{{ $t('panel.panelAdd') }}</span>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
@@ -345,9 +342,14 @@ export default {
          break
        case 'edit':
        case 'rename':
-          this.editPanel.titlePre = this.$t('commons.edit')
+          this.editPanel = {
-          this.editPanel.panelInfo.id = param.data.id
+            visible: true,
-          this.editPanel.panelInfo.name = param.data.name
+            titlePre: this.$t('commons.edit'),
+            panelInfo: {
+              id: param.data.id,
+              name: param.data.name
+            }
+          }
          break
      }
      switch (param.type) {
@@ -551,7 +553,7 @@ export default {
    font-weight: bold;
    display: block;
    height: 100%;
-    line-height: 36px;
+    /*line-height: 36px;*/
  }
  .el-divider--horizontal {
@@ -568,7 +570,16 @@ export default {
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
-    padding-right: 8px;
+    padding-right:8px;
+  }
+  .custom-tree-node-list {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding:0 8px;
  }
  .custom-position {

--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -3,34 +3,39 @@
    <el-col v-if="panelInfo.name.length>0" class="panel-design">
      <el-row class="panel-design-head">
        <!--TODO 仪表盘头部区域-->
-        <span>{{ panelInfo.name || '测试仪表板' }}</span>
+        <el-col :span="12" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;color: #606266;font-size: 16px">
-        <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
+          <span>{{ panelInfo.name || '测试仪表板' }}</span>
-          <el-tooltip :content="$t('panel.save_to_panel')">
+        </el-col>
-            <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />
+        <el-col :span="12">
-          </el-tooltip>
+          <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
-        </span>
+            <el-tooltip :content="$t('panel.save_to_panel')">
-        <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
+              <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />
-          <el-tooltip :content="$t('panel.export_to_panel')">
+            </el-tooltip>
-            <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />
+          </span>
-          </el-tooltip>
+          <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">
-        </span>
+            <el-tooltip :content="$t('panel.export_to_panel')">
-        <span style="float: right;margin-right: 10px">
+              <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />
-          <el-tooltip :content="$t('panel.preview')">
+            </el-tooltip>
-            <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
+          </span>
-          </el-tooltip>
+          <span style="float: right;margin-right: 10px">
-        </span>
+            <el-tooltip :content="$t('panel.preview')">
+              <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
+            </el-tooltip>
+          </span>
-        <span v-if="!hasStar && panelInfo" style="float: right;margin-right: 10px">
+          <span v-if="!hasStar && panelInfo" style="float: right;margin-right: 10px">
-          <el-tooltip :content="$t('panel.store')">
+            <el-tooltip :content="$t('panel.store')">
-            <el-button class="el-icon-star-off" size="mini" circle @click="star" />
+              <el-button class="el-icon-star-off" size="mini" circle @click="star" />
-          </el-tooltip>
+            </el-tooltip>
-        </span>
+          </span>
+          <span v-if="hasStar && panelInfo" style="float: right;margin-right: 10px">
+            <el-tooltip :content="$t('commons.cancel')">
+              <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
+            </el-tooltip>
+          </span>
+        </el-col>
-        <span v-if="hasStar && panelInfo" style="float: right;margin-right: 10px">
-          <el-tooltip :content="$t('commons.cancel')">
-            <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />
-          </el-tooltip>
-        </span>
      </el-row>
      <!--TODO 仪表盘预览区域-->
      <el-row class="panel-design-preview">