fix: #233 add confirm before delete element; #!zh: 删除元素前需要确认

ly525 · Feb 13, 2021 · 349d12e · 349d12e
1 parent bb1a5b5
commit 349d12e
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 7 deletions.
diff --git a/front-end/h5/src/components/core/editor/left-panel/index.js b/front-end/h5/src/components/core/editor/left-panel/index.js
@@ -1,6 +1,7 @@
 import RenderShortcutsPanel from './shortcuts-panel/index'
 import RenderPageManager from './page-manager/index'
 import RenderPageTree from './page-tree/index'
+import RenderPagePreferences from './preferences/index'
 
 export default {
   name: 'EditorLeftPanel',
@@ -20,6 +21,9 @@ export default {
           <a-tab-pane key='page-tree' tab={this.$t('editor.sidebar.tree')}>
             <RenderPageTree />
           </a-tab-pane>
+          <a-tab-pane key='preferences' tab={this.$t('editor.sidebar.preferences')}>
+            <RenderPagePreferences />
+          </a-tab-pane>
         </a-tabs>
       </a-layout-sider>
     )

diff --git a/front-end/h5/src/components/core/editor/left-panel/preferences/index.js b/front-end/h5/src/components/core/editor/left-panel/preferences/index.js
@@ -0,0 +1,32 @@
+import langMixin from 'core/mixins/i18n'
+import LocalPreferences, { IS_CONFIRM_BEFORE_DELETE_ELEMENT } from './local-preferences'
+
+export default {
+  mixins: [langMixin],
+  data: () => ({
+    form: {
+      [IS_CONFIRM_BEFORE_DELETE_ELEMENT]: false // 删除元素前需要确认
+    }
+  }),
+  methods: {
+    handleChange (key, value) {
+      switch (key) {
+        case IS_CONFIRM_BEFORE_DELETE_ELEMENT:
+          this[IS_CONFIRM_BEFORE_DELETE_ELEMENT] = value
+          LocalPreferences.set(key, value)
+          break
+        default:
+          break
+      }
+    }
+  },
+  render (h) {
+    return (
+      <a-form layout="horizontal">
+        <a-form-model-item label="删除元素前需要确认">
+          <a-switch value={this.form[IS_CONFIRM_BEFORE_DELETE_ELEMENT]} onChange={val => this.handleChange(IS_CONFIRM_BEFORE_DELETE_ELEMENT, val)} />
+        </a-form-model-item>
+      </a-form>
+    )
+  }
+}
diff --git a/front-end/h5/src/components/core/editor/left-panel/preferences/local-preferences.js b/front-end/h5/src/components/core/editor/left-panel/preferences/local-preferences.js
@@ -0,0 +1,25 @@
+export default class LocalPreferences {
+  static get (key) {
+    this.preferences = this.preferences || this.getAll()
+    return this.preferences[key]
+  }
+
+  static getAll () {
+    let preferences = {}
+    try {
+      preferences = JSON.parse(localStorage.preferences)
+    } catch (error) {}
+    return preferences
+  }
+
+  static set (key, value) {
+    this.preferences = this.preferences || this.getAll()
+    this.preferences[key] = value
+    localStorage.preferences = JSON.stringify({
+      ...this.getAll(),
+      [key]: value
+    })
+  }
+}
+
+export const IS_CONFIRM_BEFORE_DELETE_ELEMENT = 'isConfirmBeforeDeleteElement'
diff --git a/front-end/h5/src/components/core/store/modules/element.js b/front-end/h5/src/components/core/store/modules/element.js
@@ -1,5 +1,8 @@
 import Element from 'core/models/element'
 import { swapZindex, getVM } from '@/utils/element'
+import LocalPreferences, { IS_CONFIRM_BEFORE_DELETE_ELEMENT } from 'core/editor/left-panel/preferences/local-preferences.js'
+import { Modal } from 'ant-design-vue'
+import i18n from '@/locales'
 
 // actions
 export const actions = {
@@ -21,6 +24,20 @@ export const actions = {
   }
 }
 
+const confirmDelete = () => new Promise((resolve, reject) => {
+  if (LocalPreferences.get(IS_CONFIRM_BEFORE_DELETE_ELEMENT)) {
+    Modal.confirm({
+      title: i18n.t('workCard.confirmDeleteTip', { tip: `` }),
+      onOk: (close) => {
+        resolve()
+        close()
+      }
+    })
+    return
+  }
+  resolve()
+})
+
 // mutations
 export const mutations = {
   setEditingElement (state, payload) {
@@ -66,10 +83,9 @@ export const mutations = {
         {
           const index = elements.findIndex(e => e.uuid === editingElement.uuid)
           if (index !== -1) {
-            // let newElements = elements.slice()
-            // newElements.splice(index, 1)
-            // state.editingPage.elements = newElements
-            state.editingPage.elements.splice(index, 1)
+            confirmDelete().then(() => {
+              state.editingPage.elements.splice(index, 1)
+            })
           }
           state.editingElement = null
         }

diff --git a/front-end/h5/src/components/core/support/shape.js b/front-end/h5/src/components/core/support/shape.js
@@ -146,7 +146,6 @@ export default {
      * !#en: delete element with keyboard
      * !#zh: 键盘快捷键删除元素
      *
-     * TODO: 增加 确认删除 拦截操作
      */
     handleDeleteByKeyboard (event) {
       const key = event.keyCode || event.charCode

diff --git a/front-end/h5/src/locales/lang/en-US.js b/front-end/h5/src/locales/lang/en-US.js
@@ -35,7 +35,8 @@ export default {
       components: 'Components',
       pages: 'Pages',
       templates: 'Templates',
-      tree: 'Tree'
+      tree: 'Tree',
+      preferences: 'Preferences'
     },
     pageManager: {
       title: 'Page {index}',

diff --git a/front-end/h5/src/locales/lang/zh-CN.js b/front-end/h5/src/locales/lang/zh-CN.js
@@ -45,7 +45,8 @@ export default {
       components: '组件列表',
       pages: '页面管理',
       templates: '模板',
-      tree: '组件树'
+      tree: '组件树',
+      preferences: '偏好设置'
     },
     pageManager: {
       title: '第{index}页面',