Merge pull request #2404 from dataease/pr@dev@panel_edit-layout

refactor: 仪表板编辑页面操作布局优化

frontend/src/components/canvas/components/Toolbar.vue

@@ -1,5 +1,17 @@
 <template>
   <div>
+    <div class="switch-position">
+      <el-radio-group v-model="mobileLayoutInitStatus" size="mini" @change="openMobileLayout">
+        <el-radio-button :label="false">
+          <span style="float: left;">
+            <i class="el-icon-monitor" />
+          </span>
+        </el-radio-button>
+        <el-radio-button :label="true">
+          <span class="icon iconfont icon-yidongduan" />
+        </el-radio-button>
+      </el-radio-group>
+    </div>
     <div v-show="editControlButton" class="toolbar">
       <span style="float: right;">
         <el-button v-if="mobileLayoutStatus" size="mini" @click="editReset">
@@ -13,50 +25,71 @@
         </el-button>
       </span>
     </div>
+
     <div v-show="!editControlButton" class="toolbar">
-      <el-tooltip :content="$t('panel.mobile_layout')">
+      <div class="panel-info-area">
-        <el-button class="icon iconfont-tb icon-yidongduan" size="mini" circle @click="openMobileLayout" />
+        <el-tooltip :content="$t('commons.back') ">
-      </el-tooltip>
+          <i class="el-icon-back icon-back" @click="closePanelEdit" />
-      <el-tooltip v-if="!canvasStyleData.auxiliaryMatrix" :content="$t('panel.new_element_distribution')+':'+$t('panel.suspension')">
+        </el-tooltip>
-        <el-button class="icon iconfont-tb icon-xuanfuanniu" size="mini" circle @click="auxiliaryMatrixChange" />
+        <span class="text">
-      </el-tooltip>
+          {{ panelInfo.name }}
-      <el-tooltip v-if="canvasStyleData.auxiliaryMatrix" :content="$t('panel.new_element_distribution')+':'+$t('panel.matrix')">
+        </span>
-        <el-button class="icon iconfont-tb icon-shujujuzhen" size="mini" circle @click="auxiliaryMatrixChange" />
+      </div>
-      </el-tooltip>
-      <el-tooltip :content="$t('panel.style')">
-        <el-button class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
-      </el-tooltip>
       <el-tooltip :content="$t('panel.undo') ">
-        <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
+        <i class="el-icon-refresh-right insert" @click="undo" />
       </el-tooltip>
       <el-tooltip :content="$t('panel.redo') ">
-        <el-button class="el-icon-refresh-left" size="mini" circle @click="redo" />
+        <i class="el-icon-refresh-left insert" @click="redo" />
-      </el-tooltip>
-      <el-tooltip :content="$t('panel.clean_canvas')">
-        <el-button class="el-icon-document-delete" size="mini" circle @click="clearCanvas" />
       </el-tooltip>
       <el-tooltip :content="$t('panel.fullscreen_preview')">
-        <el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
+        <span class="icon iconfont icon-fangda insert" @click="clickPreview" />
-      </el-tooltip>
-      <el-tooltip :content="$t('panel.params_setting')">
-        <el-button class="icon iconfont-tb icon-canshu" size="mini" circle @click="openOuterParamsSet" />
-      </el-tooltip>
-      <el-tooltip v-if="!canvasStyleData.aidedDesign.showGrid" :content="$t('panel.aided_grid')+':'+$t('panel.aided_grid_close')">
-        <el-button class="icon iconfont-tb icon-wangge-close" size="mini" circle @click="showGridChange" />
-      </el-tooltip>
-      <el-tooltip v-if="canvasStyleData.aidedDesign.showGrid" :content="$t('panel.aided_grid')+':'+$t('panel.aided_grid_open')">
-        <el-button class="icon iconfont-tb icon-wangge-open" size="mini" circle @click="showGridChange" />
-      </el-tooltip>
-      <el-tooltip :content="$t('panel.batch_opt')">
-        <el-button class="icon iconfont-tb icon-piliang-copy" size="mini" circle @click="batchOption" />
       </el-tooltip>
+      <el-divider direction="vertical" />
+
+      <span class="button_self">
+        <el-dropdown trigger="click" placement="bottom-start" size="mini">
+          <el-button size="mini">
+            <i class="el-icon-arrow-down" />
+          </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>
+              <el-dropdown placement="right-start" size="mini" style="width: 100%">
+                <span>
+                  <span class="icon iconfont" :class="[canvasStyleData.auxiliaryMatrix?'icon-shujujuzhen':'icon-xuanfuanniu']" />
+                  <span style="font-size: 12px">{{ $t('panel.new_element_distribution') }}</span>
+                  <i class="el-icon-arrow-right el-icon--right" />
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item @click.native="auxiliaryMatrixChange">
+                    <span :class="[!canvasStyleData.auxiliaryMatrix?'font-active':'']"> {{ $t('panel.suspension') }} </span>
+                    <i v-if="!canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check" />
+                  </el-dropdown-item>
+                  <el-dropdown-item @click.native="auxiliaryMatrixChange">
+                    <span :class="[canvasStyleData.auxiliaryMatrix?'font-active':'']"> {{ $t('panel.matrix') }} </span>
+                    <i v-if="canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check" />
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-dropdown-item>
+            <el-dropdown-item @click.native="showGridChange">
+              <span class="icon iconfont-tb" :class="[canvasStyleData.aidedDesign.showGrid?'icon-wangge-open':'icon-wangge-close']" />
+              {{ $t('panel.aided_grid') }}:{{ canvasStyleData.aidedDesign.showGrid?$t('panel.aided_grid_open'):$t('panel.aided_grid_close') }}
+            </el-dropdown-item>
+            <el-dropdown-item @click.native="openOuterParamsSet">
+              <span class="icon iconfont-tb icon-canshu" />{{ $t('panel.params_setting') }}
+            </el-dropdown-item>
+            <el-dropdown-item @click.native="clearCanvas">
+              <i class="el-icon-document-delete" />{{ $t('panel.clean_canvas') }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </span>
+      <el-button size="mini" class="el-icon-magic-stick el-icon--left" @click="showPanel">{{ $t('panel.panel_style') }}</el-button>
+      <el-button size="mini" @click="batchOption"> <span class="icon iconfont-tb icon-piliang-copy el-icon--left" />{{ $t('panel.batch_opt') }}</el-button>
       <span style="float: right;margin-left: 10px">
         <el-button size="mini" type="primary" :disabled="saveButtonDisabled" @click="save(false)">
           {{ $t('commons.save') }}
         </el-button>
-        <el-button size="mini" @click="closePanelEdit">
-          {{ $t('commons.close') }}
-        </el-button>
       </span>
     </div>
 
@@ -103,6 +136,7 @@ export default {
   },
   data() {
     return {
+      mobileLayoutInitStatus: false,
       isShowPreview: false,
       needToChange: [
         'top',
@@ -119,6 +153,9 @@ export default {
     }
   },
   computed: {
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    },
     saveButtonDisabled() {
       return this.changeTimes === 0 || this.snapshotIndex === this.lastSaveSnapshotIndex
     },
@@ -147,6 +184,7 @@ export default {
     eventBus.$on('save', this.save)
     eventBus.$on('clearCanvas', this.clearCanvas)
     this.scale = this.canvasStyleData.scale
+    this.mobileLayoutInitStatus = this.mobileLayoutStatus
   },
   methods: {
     close() {
@@ -277,7 +315,7 @@ export default {
       this.$store.commit('clearPanelLinkageInfo')
       // 保存到数据库
       const requestInfo = {
-        id: this.$store.state.panel.panelInfo.id,
+        id: this.panelInfo.id,
         panelStyle: JSON.stringify(this.canvasStyleData),
         panelData: JSON.stringify(this.componentData)
       }
@@ -311,6 +349,7 @@ export default {
       this.$store.commit('setComponentData', [])
       this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING)
       this.$store.commit('recordSnapshot', 'clearCanvas')
+      this.$store.commit('setInEditorStatus', false)
     },
 
     handlePreviewChange() {
@@ -353,18 +392,18 @@ export default {
         }
       }
       const request = {
-        panelId: this.$store.state.panel.panelInfo.id,
+        panelId: this.panelInfo.id,
         sourceViewId: this.curLinkageView.propValue.viewId,
         linkageInfo: this.targetLinkageInfo
       }
       saveLinkage(request).then(rsp => {
         // 刷新联动信息
-        getPanelAllLinkageInfo(this.$store.state.panel.panelInfo.id).then(rsp => {
+        getPanelAllLinkageInfo(this.panelInfo.id).then(rsp => {
           this.$store.commit('setNowPanelTrackInfo', rsp.data)
         })
         this.cancelLinkageSettingStatus()
         // 刷新跳转信息
-        queryPanelJumpInfo(this.$store.state.panel.panelInfo.id).then(rsp => {
+        queryPanelJumpInfo(this.panelInfo.id).then(rsp => {
           this.$store.commit('setNowPanelJumpInfo', rsp.data)
         })
       })
@@ -372,6 +411,7 @@ export default {
     cancelMobileLayoutStatue(sourceComponentData) {
       this.$store.commit('setComponentData', sourceComponentData)
       this.$store.commit('setMobileLayoutStatus', false)
+      this.mobileLayoutInitStatus = false
     },
     cancelLinkage() {
       this.cancelLinkageSettingStatus()
@@ -392,8 +432,12 @@ export default {
       this.$store.commit('setBatchOptStatus', !this.batchOptStatus)
     },
     // 启用移动端布局
-    openMobileLayout() {
+    openMobileLayout(switchVal) {
-      this.$store.commit('openMobileLayout')
+      if (switchVal) {
+        this.$store.commit('openMobileLayout')
+      } else {
+        this.mobileLayoutSave()
+      }
     },
     editSave() {
       if (this.mobileLayoutStatus) {
@@ -439,7 +483,7 @@ export default {
   .toolbar {
     float: right;
     height: 35px;
-    line-height: 35px;
+    line-height: 32px;
     min-width: 400px;
     .canvas-config {
       display: inline-block;
@@ -464,8 +508,8 @@ export default {
       line-height: 1;
       white-space: nowrap;
       cursor: pointer;
-      background: #FFF;
+      /*background: #FFF;*/
-      border: 1px solid #DCDFE6;
+      /*border: 1px solid #DCDFE6;*/
       color: var(--TextPrimary, #606266);
       -webkit-appearance: none;
       text-align: center;
@@ -474,14 +518,15 @@ export default {
       margin: 0;
       transition: .1s;
       font-weight: 500;
-      padding: 9px 15px;
+      padding: 5px 5px;
-      font-size: 12px;
+      font-size: 16px!important;
       border-radius: 3px;
       margin-left: 10px;
 
       &:active {
-        color: #3a8ee6;
+        color: #000;
         border-color: #3a8ee6;
+        background-color: red;
         outline: 0;
       }
 
@@ -520,4 +565,41 @@ export default {
     -moz-osx-font-smoothing: grayscale;
   }
 
+  .switch-position{
+    position: absolute;
+    top: 3px;
+    right: 50%;
+    width: 100px;
+  }
+  .button_self{
+    margin-right: 5px;
+  }
+
+  .button_self ::v-deep .el-button--mini{
+    padding: 7px 7px !important;
+  }
+  .font-active{
+    font-color: #3a8ee6!important;
+  }
+  .icon-active{
+    color: #3a8ee6;
+  }
+  .icon-unactivated{
+    display: none;
+  }
+  .panel-info-area{
+    position: absolute;
+    left: 10px;
+    .text{
+      font-size: 16px;
+      color: var(--TextPrimary, #606266);
+    };
+    .icon-back{
+      font-size: 18px;
+      font-weight: bold;
+      color: var(--TextPrimary, #606266);
+    }
+
+  }
+
 </style>

frontend/src/components/canvas/utils/shortcutKey.js

@@ -1,7 +1,7 @@
 import store from '@/store'
-import eventBus from '@/components/canvas/utils/eventBus'
 
 const ctrlKey = 17
+const commandKey = 91 // mac command
 const vKey = 86 // 粘贴
 const cKey = 67 // 复制
 const xKey = 88 // 剪切
@@ -27,10 +27,7 @@ export const keycodes = [66, 67, 68, 69, 71, 76, 80, 83, 85, 86, 88, 89, 90]
 const basemap = {
   [vKey]: paste,
   [yKey]: redo,
-  [zKey]: undo,
+  [zKey]: undo
-  [sKey]: save,
-  [pKey]: preview,
-  [eKey]: clearCanvas
 }
 
 // 组件锁定状态下可以执行的操作
@@ -51,33 +48,28 @@ const unlockMap = {
   [lKey]: lock
 }
 
-let isCtrlDown = false
+let isCtrlOrCommandDown = false
-// 全局监听按键操作并执行相应命令
+// Monitor key operations globally and execute corresponding commands
-// export function listenGlobalKeyDown() {
+export function listenGlobalKeyDown() {
-//   window.onkeydown = (e) => {
+  window.onkeydown = (e) => {
-//     const { curComponent } = store.state
+    if (!store.state.isInEditor) return
-//     if (e.keyCode === ctrlKey) {
+    const { keyCode } = e
-//       isCtrlDown = true
+    if (keyCode === ctrlKey || keyCode === commandKey) {
-//     } else if (e.keyCode === deleteKey && curComponent) {
+      isCtrlOrCommandDown = true
-//       store.commit('deleteComponent')
+    } else if (isCtrlOrCommandDown) {
-//       store.commit('recordSnapshot')
+      if (keyCode === zKey || keyCode === yKey) {
-//     } else if (isCtrlDown) {
+        e.preventDefault()
-//       if (!curComponent || !curComponent.isLock) {
+        unlockMap[keyCode]()
-//         e.preventDefault()
+      }
-//         unlockMap[e.keyCode] && unlockMap[e.keyCode]()
+    }
-//       } else if (curComponent && curComponent.isLock) {
+  }
-//         e.preventDefault()
+
-//         lockMap[e.keyCode] && lockMap[e.keyCode]()
+  window.onkeyup = (e) => {
-//       }
+    if (e.keyCode === ctrlKey || e.keyCode === commandKey) {
-//     }
+      isCtrlOrCommandDown = false
-//   }
+    }
-//
+  }
-//   window.onkeyup = (e) => {
+}
-//     if (e.keyCode === ctrlKey) {
-//       isCtrlDown = false
-//     }
-//   }
-// }
 
 function copy() {
   store.commit('copy')
@@ -115,14 +107,6 @@ function decompose() {
   }
 }
 
-function save() {
-  eventBus.$emit('save')
-}
-
-function preview() {
-  eventBus.$emit('preview')
-}
-
 function deleteComponent() {
   if (store.state.curComponent) {
     store.commit('deleteComponent')
@@ -130,10 +114,6 @@ function deleteComponent() {
   }
 }
 
-function clearCanvas() {
-  eventBus.$emit('clearCanvas')
-}
-
 function lock() {
   store.commit('lock')
 }

frontend/src/lang/en.js

@@ -1452,6 +1452,7 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    panel_style: 'Panel Style',
     multiplexing: 'Multiplexing',
     panel_off: 'Off the shelf',
     batch_opt: 'Batch Operation',
@@ -1646,7 +1647,7 @@ export default {
     no_drill_field: 'Miss relation field',
     matrix: 'matrix',
     suspension: 'suspension',
-    new_element_distribution: 'New element Distribution',
+    new_element_distribution: 'Element Distribution',
     aided_grid: 'Aided Grid',
     aided_grid_open: 'Open',
     aided_grid_close: 'Close',

frontend/src/lang/tw.js

@@ -1453,6 +1453,7 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    panel_style: '仪表板样式',
     multiplexing: '復用',
     panel_off: '儀表板已下架',
     batch_opt: '批量操作',
@@ -1647,7 +1648,7 @@ export default {
     no_drill_field: '缺少關聯字段',
     matrix: '矩陣',
     suspension: '懸浮',
-    new_element_distribution: '當前元素移入分佈方式',
+    new_element_distribution: '元素移入分佈方式',
     aided_grid: '輔助設計網格',
     aided_grid_open: '打開',
     aided_grid_close: '關閉',

frontend/src/lang/zh.js

@@ -646,7 +646,7 @@ export default {
     login_type: '默认登录方式',
     empty_front: '为空则默认取10秒',
     empty_msg: '为空则默认取30天',
-    front_error: '请填写0-300正整数', //修改了提示信息
+    front_error: '请填写0-300正整数', // 修改了提示信息
     msg_error: '请填写1-365正整数',
     SMTP_port: 'SMTP端口',
     SMTP_account: 'SMTP账户',
@@ -1460,6 +1460,7 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    panel_style: '仪表板样式',
     multiplexing: '复用',
     panel_off: '仪表板已下架',
     batch_opt: '批量操作',
@@ -1656,7 +1657,7 @@ export default {
     no_drill_field: '缺少关联字段',
     matrix: '矩阵',
     suspension: '悬浮',
-    new_element_distribution: '当前元素移入分布方式',
+    new_element_distribution: '元素移入分布方式',
     aided_grid: '辅助设计网格',
     aided_grid_open: '打开',
     aided_grid_close: '关闭',

frontend/src/store/index.js

@@ -129,7 +129,8 @@ const data = {
       customStyle: {},
       customAttr: {}
     },
-    allViewRender: []
+    allViewRender: [],
+    isInEditor: false // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
   },
   mutations: {
     ...animation.mutations,
@@ -658,6 +659,8 @@ const data = {
       this.commit('clearLinkageSettingInfo', false)
       this.commit('resetViewEditInfo')
       this.commit('initCurMultiplexingComponents')
+      // 清空当前缓存,快照
+      this.commit('refreshSnapshot')
       state.batchOptStatus = false
       // Currently selected components
       state.curBatchOptComponents = []
@@ -670,6 +673,7 @@ const data = {
         customStyle: {},
         customAttr: {}
       }
+      state.isInEditor = true
     },
     initViewRender(state, pluginViews) {
       pluginViews.forEach(plugin => {
@@ -679,6 +683,9 @@ const data = {
     },
     initCurMultiplexingComponents(state) {
       state.curMultiplexingComponents = {}
+    },
+    setInEditorStatus(state, status) {
+      state.isInEditor = status
     }
   },
   modules: {

frontend/src/views/panel/edit/index.vue

@@ -1,16 +1,8 @@
 <template>
   <el-row>
     <el-header class="de-header">
-      <el-col
-        :span="8"
-        style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;color: #606266;font-size: 16px"
-      >
-        <span style="line-height: 35px;">
-          {{ $t('commons.name') }} ：{{ panelInfo.name || '测试仪表板' }}
-        </span>
-      </el-col>
       <!--横向工具栏-->
-      <el-col :span="16">
+      <el-col :span="24">
         <Toolbar
           ref="toolbar"
           :style-button-active="show&&showIndex===2"
@@ -376,7 +368,7 @@ import ChartEdit from '@/views/chart/view/ChartEdit'
 import OuterParamsSet from '@/views/panel/OuterParamsSet/index'
 import ChartStyleBatchSet from '@/views/chart/view/ChartStyleBatchSet'
 import Multiplexing from '@/views/panel/ViewSelect/multiplexing'
-
+import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey'
 export default {
   name: 'PanelEdit',
   components: {
@@ -388,7 +380,6 @@ export default {
     DeContainer,
     DeAsideContainer,
     FilterGroup,
-    ViewSelect,
     Editor,
     Toolbar,
     FilterDialog,
@@ -615,6 +606,8 @@ export default {
     }
   },
   created() {
+    // Global listening for key events
+    listenGlobalKeyDown()
     this.init(this.$store.state.panel.panelInfo.id)
   },
   mounted() {
@@ -1145,11 +1138,11 @@ export default {
   .de-header {
     height: 35px !important;
     border-bottom: 1px solid #E6E6E6;
-
+    background-color: var(--SiderBG, white);
   }
 
   .blackTheme .de-header {
-    background-color: var(--SiderBG) !important;
+    background-color: var(--SiderBG, white) !important;
     color: var(--TextActive);
   }
 

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

@@ -686,8 +686,6 @@ export default {
     edit(data, node) {
       this.lastActiveNodeData = data
       this.lastActiveNode = node
-      // 清空当前缓存,快照
-      this.$store.commit('refreshSnapshot')
       this.$store.commit('setComponentData', [])
       this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING)
       this.$store.dispatch('panel/setPanelInfo', {