diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 0e60657ed2..5c371e3311 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1932,6 +1932,7 @@ export default {
     back_parent: 'Back to previous'
   },
   panel: {
+    unpublished_tips: 'After unpublishing, the panel cannot be viewed. Are you sure you want to cancel publishing? ',
     position_adjust_component: 'Position adjust',
     active_font_size: 'Selected font size',
     carousel: 'Carousel',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 7f1ea13338..013e9f868f 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1926,6 +1926,7 @@ export default {
     back_parent: '返回上一級'
   },
   panel: {
+    unpublished_tips: '取消發布後，該儀表板不能被查看。確定要取消發布？',
     position_adjust_component: '位置調整',
     active_font_size: '选中字體大小',
     carousel: '輪播',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 8e63fcc65d..132db9fdd7 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1926,6 +1926,7 @@ export default {
     back_parent: '返回上一级'
   },
   panel: {
+    unpublished_tips: '取消发布后，该仪表板不能被查看。确定要取消发布？',
     position_adjust_component: '位置调整',
     active_font_size: '选中字体大小',
     carousel: '轮播',
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 48118c3784..97cf615766 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
@@ -45,7 +45,7 @@
               width="400"
               trigger="click"
             >
-              <panel-detail-info />
+              <panel-detail-info/>
               <i
                 slot="reference"
                 class="el-icon-warning icon-class"
@@ -340,8 +340,10 @@ import { dataURLToBlob, getNowCanvasComponentData } from '@/components/canvas/ut
 import { findResourceAsBase64 } from '@/api/staticResource/staticResource'
 import PanelDetailInfo from '@/views/panel/list/common/PanelDetailInfo'
 import AppExportForm from '@/views/panel/list/AppExportForm'
+import msgCfm from '@/components/msgCfm/index'
 
 export default {
+  mixins: [msgCfm],
   name: 'PanelViewShow',
   components: { AppExportForm, PanelDetailInfo, Preview, SaveToTemplate, PDFPreExport, ShareHead },
   props: {
@@ -700,10 +702,18 @@ export default {
     },
     changePublishState() {
       if (this.panelInfo.status === 'publish') {
-        this.panelInfo.status = 'unpublished'
+        const options = {
+          title: this.$t('panel.unpublished_tips'),
+          type: 'primary',
+          cb: () => this.updatePublishStatus('unpublished')
+        }
+        this.handlerConfirm(options, this.$t('commons.confirm'))
       } else {
-        this.panelInfo.status = 'publish'
+        this.updatePublishStatus('publish')
       }
+    },
+    updatePublishStatus(newStatus) {
+      this.panelInfo.status = newStatus
       updatePanelStatus(this.panelInfo.id, { 'status': this.panelInfo.status })
       this.$emit('editPanelBashInfo', {
         'operation': 'status',