feat: refactor core-editor as npm package: @luban-h5/core-editor

front-end/h5/package.json

@@ -11,7 +11,8 @@
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vue-cli-service test:unit",
     "build:editor": "cross-env PAGE=EDITOR vue-cli-service build",
-    "build:engine": "cross-env PAGE=ENGINE vue-cli-service build --target lib --name engine ./src/engine-entry.js"
+    "build:engine": "cross-env PAGE=ENGINE vue-cli-service build --target lib --name engine ./src/engine-entry.js",
+    "build:core_editor": "cross-env PAGE=CORE_EDITOR vue-cli-service build --target lib --name core-editor ./src/components/core/index.js"
   },
   "dependencies": {
     "@luban-h5/lbc-button": "^0.0.3",

front-end/h5/src/components/core/editor/fixed-tools/index.js

@@ -1,7 +1,11 @@
+import { mapActions } from 'vuex'
 import hotkeys from 'hotkeys-js'
 import fixedTools from './options'
 
 export default {
+  methods: {
+    ...mapActions('editor', ['pageManager'])
+  },
   render () {
     return (
       <a-layout-sider

front-end/h5/src/components/core/editor/fixed-tools/options.js

@@ -1,4 +1,4 @@
-import undoRedoHistory from '@/store/plugins/undo-redo/History'
+import undoRedoHistory from 'core/store/plugins/undo-redo/History'
 
 const fixedTools = [
   {

front-end/h5/src/components/core/index.js

@@ -15,9 +15,20 @@ import Header from '@/components/common/header/index'
 import Feedback from '@/components/common/feedback/index'
 import AdjustLineV from 'core/support/adjust-line/vertical'
 
+import store from 'core/store/index'
+import i18n from '@/locales'
+import '@/plugins/index'
+
 window.EditorApp = new Vue() // event bus
-export default {
-  name: 'Editor',
+const CoreEditor = {
+  name: 'CoreEditor',
+  store,
+  i18n,
+  props: {
+    workId: {
+      type: [Number, String]
+    }
+  },
   data: () => ({
     previewDialogVisible: false,
     propsPanelWidth: 320
@@ -56,11 +67,22 @@ export default {
     )
   },
   created () {
-    let workId = this.$route.params.workId
-    if (workId) {
-      this.fetchWork(workId)
+    if (this.workId) {
+      this.fetchWork(this.workId)
     } else {
       this.$message.error('no work id!')
     }
   }
 }
+
+// Vue install, Vue.use 会调用该方法。
+CoreEditor.install = (Vue, opts = {}) => {
+  Vue.component(CoreEditor.name, CoreEditor)
+}
+
+// 通过script标签引入Vue的环境
+if (typeof window !== 'undefined' && window.Vue) {
+  CoreEditor.install(window.Vue)
+}
+
+export default CoreEditor

front-end/h5/src/components/core/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@luban-h5/core-editor",
+  "private": false,
+  "version": "0.0.2",
+  "description": "luban-h5 core-editor",
+  "main": "dist/core-editor.umd.min.js",
+  "author": "ly525",
+  "license": "GPL-3.0"
+}

front-end/h5/src/components/core/store/index.js

@@ -0,0 +1,38 @@
+/*
+ * @Author: ly525
+ * @Date: 2020-10-11 10:13:51
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-10-11 11:16:37
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/store/index.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: Do not edit
+ * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ */
+import Vue from 'vue'
+import Vuex from 'vuex'
+import undoRedoPlugin from './plugins/undo-redo/index'
+import editor from './modules/editor'
+import user from './modules/user'
+import loading from './modules/loading'
+import i18n from './modules/i18n'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  },
+  modules: {
+    editor,
+    user,
+    loading,
+    i18n
+  },
+  plugins: [undoRedoPlugin]
+})

front-end/h5/src/components/core/store/modules/editor.js

@@ -0,0 +1,42 @@
+// initial state
+import Work from 'core/models/work'
+import { actions as pageActions, mutations as pageMutations } from './page'
+import { actions as elementActions, mutations as elementMutations } from './element'
+import { actions as workActions, mutations as workMutations } from './work'
+
+const state = {
+  works: [],
+  work: new Work(),
+  editingPage: { elements: [] },
+  editingElement: null,
+  formDetailOfWork: {
+    uuidMap2Name: {},
+    formRecords: []
+  },
+  workTemplates: []
+}
+
+// getters
+const getters = {}
+
+// actions
+const actions = {
+  ...elementActions,
+  ...pageActions,
+  ...workActions
+}
+
+// mutations
+const mutations = {
+  ...elementMutations,
+  ...pageMutations,
+  ...workMutations
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}

front-end/h5/src/components/core/store/modules/i18n.js

@@ -0,0 +1,25 @@
+import { loadLanguageAsync } from '@/locales'
+
+const i18n = {
+  namespaced: true,
+  state: {
+    lang: 'zh-CN'
+  },
+  mutations: {
+    SET_LANG: (state, lang) => {
+      state.lang = lang
+    }
+  },
+  actions: {
+    // 设置界面语言
+    SetLang ({ commit }, lang) {
+      return new Promise(resolve => {
+        commit('SET_LANG', lang)
+        loadLanguageAsync(lang)
+        resolve()
+      })
+    }
+  }
+}
+
+export default i18n

front-end/h5/src/components/core/store/modules/loading.js

@@ -0,0 +1,47 @@
+/*
+ * @Author: ly525
+ * @Date: 2019-11-24 18:51:58
+ * @LastEditors: ly525
+ * @LastEditTime: 2019-12-08 17:21:48
+ * @FilePath: /luban-h5/front-end/h5/src/store/modules/loading.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: loading module
+ * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
+ */
+// initial state
+const state = {
+  saveWork_loading: false,
+  previewWork_loading: false,
+  fetchWorks_loading: false,
+  setWorkAsTemplate_loading: false,
+  fetchWorkTemplates_loading: false,
+  useTemplate_loading: false,
+  uploadWorkCover_loading: false
+}
+
+// getters
+const getters = {
+
+}
+
+// actions
+const actions = {
+  update ({ commit }, payload) {
+    commit('update', payload)
+  }
+}
+
+// mutations
+const mutations = {
+  update (state, { type, payload }) {
+    state[type] = payload
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}