From cc40c628d686af60ee9a4297c016f262d52f6a27 Mon Sep 17 00:00:00 2001
From: Wangjiahao <1522128093@qq.com>
Date: Tue, 23 May 2023 10:31:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E4=BB=AA=E8=A1=A8=E6=9D=BF=E5=90=8D=E5=AD=97=E8=BE=83?=
 =?UTF-8?q?=E9=95=BF=E6=97=B6=E4=BF=A1=E6=81=AF=E8=A2=AB=E5=8E=8B=E7=BC=A9?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=20#4860?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/panel/list/PanelViewShow.vue    | 88 ++++++++++++-------
 1 file changed, 55 insertions(+), 33 deletions(-)

diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 85eee9d883..ec83885964 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -17,7 +17,7 @@
         style="border-bottom: 1px solid;border-bottom-color:#E6E6E6;"
       >
         <div style="height: 100%;">
-          <share-head />
+          <share-head/>
         </div>
       </el-row>
       <el-row
@@ -29,21 +29,26 @@
         <div style="height: 100%;">
           <el-col
             :span="12"
-            style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px"
+            style="font-size: 14px;display: flex"
           >
-            <span class="panel-name">{{ panelInfo.name || '测试仪表板' }}</span>
-            <span
-              v-if="panelInfo.isDefault"
-              style="color: green;font-size: 12px"
-            >({{ $t('panel.default_panel_name') }}:{{ panelInfo.defaultPanelName }})</span>
-            <span
-              v-if="panelInfo.sourcePanelName"
-              style="color: green;font-size: 12px"
-            >&nbsp;({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span>
-            <span
-              v-if="!hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
-              style="margin-left: 9px"
+            <div :title="showName" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px;max-width: 300px"><span
+              class="panel-name"
             >
+              {{ panelInfo.name || '测试仪表板' }}</span>
+              <span
+                v-if="panelInfo.isDefault"
+                style="color: green;font-size: 12px"
+              >({{ $t('panel.default_panel_name') }}:{{ panelInfo.defaultPanelName }})</span>
+              <span
+                v-if="panelInfo.sourcePanelName"
+                style="color: green;font-size: 12px"
+              >&nbsp;({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span>
+            </div>
+            <div style="width: 200px">
+              <span
+                v-if="!hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
+                style="margin-left: 9px"
+              >
               <el-tooltip :content="$t('panel.store')">
                 <i
                   class="el-icon-star-off"
@@ -51,10 +56,10 @@
                 />
               </el-tooltip>
             </span>
-            <span
-              v-if="hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
-              style="margin-left: 9px"
-            >
+              <span
+                v-if="hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
+                style="margin-left: 9px"
+              >
               <el-tooltip :content="$t('commons.cancel') + $t('panel.store')">
                 <i
                   class="el-icon-star-on"
@@ -62,23 +67,27 @@
                 />
               </el-tooltip>
             </span>
-            <template v-if="panelInfo.creatorName">
-              <el-divider
-                style="margin: 0 16px;"
-                direction="vertical"
-              />
-              <span class="panel-create">
+              <template v-if="panelInfo.creatorName">
+                <el-divider
+                  style="margin: 0 16px;"
+                  direction="vertical"
+                />
+                <span class="panel-create">
                 {{ $t('panel.create_by') + ':' + panelInfo.creatorName }}
               </span>
-            </template>
-            <el-popover
-              placement="right-start"
-              width="400"
-              trigger="click"
-            >
-              <panel-detail-info />
-              <svg-icon slot="reference" style="margin-left: 4px;cursor: pointer;font-size: 14px;" class="icon-class" icon-class="icon_info_outlined" />
-            </el-popover>
+              </template>
+              <el-popover
+                placement="right-start"
+                width="400"
+                trigger="click"
+              >
+                <panel-detail-info/>
+                <svg-icon slot="reference" style="margin-left: 4px;cursor: pointer;font-size: 14px;" class="icon-class"
+                          icon-class="icon_info_outlined"
+                />
+              </el-popover>
+            </div>
+
           </el-col>
           <el-col :span="12">
 
@@ -388,6 +397,7 @@ import AppExportForm from '@/views/panel/list/AppExportForm'
 import GrantAuth from '../grantAuth'
 import msgCfm from '@/components/msgCfm/index'
 import { inOtherPlatform } from '@/utils/index'
+
 export default {
   name: 'PanelViewShow',
   components: { AppExportForm, PanelDetailInfo, Preview, SaveToTemplate, PDFPreExport, ShareHead, GrantAuth },
@@ -423,6 +433,17 @@ export default {
     }
   },
   computed: {
+    showName(){
+      let name = this.panelInfo.name || '测试仪表板'
+      if(this.panelInfo.isDefault){
+        name = name +'('+ this.$t('panel.default_panel_name') +':'+ this.panelInfo.defaultPanelName +')'
+      }
+
+      if(this.panelInfo.sourcePanelName){
+        name = name +'('+ this.$t('panel.source_panel_name') +':'+ this.panelInfo.sourcePanelName +')'
+      }
+      return name
+    },
     mainCanvasComponentData() {
       return getNowCanvasComponentData(this.canvasId)
     },
@@ -837,6 +858,7 @@ export default {
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
+    flex: 1;
     color: var(--deTextPrimary, #1F2329);
 
   }