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

ly525
1 parent 78b882b3
Showing 15 changed files with 462 additions and 7 deletions
front-end/h5/package.json
front-end/h5/src/components/core/editor/fixed-tools/index.js
front-end/h5/src/components/core/editor/fixed-tools/options.js
front-end/h5/src/components/core/index.js
front-end/h5/src/components/core/package.json
front-end/h5/src/components/core/store/index.js
front-end/h5/src/components/core/store/modules/editor.js
front-end/h5/src/store/modules/element.js → front-end/h5/src/components/core/store/modules/element.js
front-end/h5/src/components/core/store/modules/i18n.js
front-end/h5/src/components/core/store/modules/loading.js
front-end/h5/src/store/modules/page.js → front-end/h5/src/components/core/store/modules/page.js
front-end/h5/src/store/modules/visible.js → front-end/h5/src/components/core/store/modules/user.js
front-end/h5/src/components/core/store/modules/work.js
front-end/h5/src/store/plugins/undo-redo/History.js → front-end/h5/src/components/core/store/plugins/undo-redo/History.js
front-end/h5/src/store/plugins/undo-redo/index.js → front-end/h5/src/components/core/store/plugins/undo-redo/index.js
@@ -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",
+import { mapActions } from 'vuex'
 import hotkeys from 'hotkeys-js'
 import fixedTools from './options'
 export default {
+  methods: {
+    ...mapActions('editor', ['pageManager'])
+  },
   render () {
     return (
       <a-layout-sider
-import undoRedoHistory from '@/store/plugins/undo-redo/History'
+import undoRedoHistory from 'core/store/plugins/undo-redo/History'
 const fixedTools = [
   {
@@ -15,9 +15,20 @@ import Header from &#39;@/components/common/header/index&#39;
 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
+{
+  "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"
+}
+/*
+ * @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]
+})
+// 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
+}
+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
+/*
+ * @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
+}
+import Element from 'core/models/element'
+import strapi from '@/utils/strapi'
+import Page from 'core/models/page'
+import Work from 'core/models/work'
+import { AxiosWrapper } from '@/utils/http.js'
+// import router from '@/router.js'
+import { takeScreenshot } from '@/utils/canvas-helper.js'
+
+function setLoading (commit, loadingName, isLoading) {
+  commit('loading/update', { type: loadingName, payload: isLoading }, { root: true })
+}
+
+export const actions = {
+  previewWork ({ commit }, payload = {}) {
+    commit('previewWork', payload)
+  },
+  deployWork ({ commit }, payload = {}) {
+    commit('previewWork', payload)
+  },
+  // createWork ({ commit }, payload) {
+  //   strapi.createEntry('works', new Work()).then(entry => {
+  //     const routeData = router.resolve({ name: 'editor', params: { workId: entry.id } })
+  //     window.open(routeData.href, '_blank')
+  //     // 如果希望不打开新 tab，可以注释上面面两行，启用下面一行的代码即可，不过不推荐。将编辑器单独起一个页面更有利于 vuex 的数据管理
+  //     // router.replace({ name: 'editor', params: { workId: entry.id } })
+  //   })
+  // },
+  updateWork ({ commit, state }, payload = {}) {
+    // update work with strapi
+    const work = {
+      ...state.work,
+      ...payload
+    }
+    commit('setWork', work)
+  },
+  /**
+   * isSaveCover {Boolean} 保存作品时，是否保存封面图
+   * loadingName {String} saveWork_loading, previewWork_loading
+   * 预览作品之前需要先保存，但希望 用户点击保存按钮 和 点击预览按钮 loading_name 能够不同（虽然都调用了 saveWork）
+   * 因为 loading 效果要放在不同的按钮上
+   */
+  saveWork ({ commit, dispatch, state }, { isSaveCover = false, loadingName = 'saveWork_loading', successMsg = '保存作品成功' } = {}) {
+    const fn = (callback) => {
+      new AxiosWrapper({
+        dispatch,
+        commit,
+        loading_name: loadingName,
+        successMsg,
+        customRequest: strapi.updateEntry.bind(strapi)
+      }).put('works', state.work.id, state.work).then(callback)
+    }
+    return new Promise((resolve, reject) => {
+      if (isSaveCover) {
+        setLoading(commit, 'uploadWorkCover_loading', true)
+        takeScreenshot().then(file => {
+          dispatch('uploadCover', { file }).then(() => {
+            setLoading(commit, 'uploadWorkCover_loading', false)
+            fn(resolve)
+          }) // uploadCover
+        }) // takeScreenshot
+      } else {
+        fn(resolve)
+      }
+    })
+  },
+  fetchWork ({ commit, state }, workId) {
+    return strapi.getEntry('works', workId).then(entry => {
+      commit('setWork', entry)
+      commit('setEditingPage')
+    })
+  },
+  fetchWorks ({ commit, dispatch, state }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorks',
+      loading_name: 'fetchWorks_loading',
+      successMsg: '获取作品列表成功',
+      customRequest: strapi.getEntries.bind(strapi)
+    }).get('works', { is_template: false })
+  },
+  fetchWorksWithForms ({ commit, dispatch, state }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorks',
+      loading_name: 'fetchWorks_loading',
+      successMsg: '获取作品列表成功',
+      customRequest: strapi.getEntries.bind(strapi)
+    }).get('works/has-forms', { is_template: false })
+  },
+  fetchWorkTemplates ({ commit, dispatch, state }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorkTemplates',
+      loading_name: 'fetchWorkTemplates_loading',
+      successMsg: '获取模板列表成功',
+      customRequest: strapi.getEntries.bind(strapi)
+    }).get('works', { is_template: true })
+  },
+  /**
+   *
+   * @param {*} workId
+   * response demo:
+   {
+    "uuidMap2Name": {
+        "1565596393441": "姓名",
+        "1565596397671": "学校"
+    },
+    "formRecords": [
+        {
+            "id": 3,
+            "form": {
+                "1565369322603": "abc"
+            },
+            "work": 8,
+            "created_at": "2019-08-09T16:52:28.826Z",
+            "updated_at": "2019-08-09T16:52:28.832Z"
+        },
+        {
+            "id": 4,
+            "form": {
+                "1565595388440": "ddd"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:36:54.521Z",
+            "updated_at": "2019-08-11T07:36:54.526Z"
+        },
+        {
+            "id": 5,
+            "form": {
+                "1565595388440": "acd"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:45:22.000Z",
+            "updated_at": "2019-08-11T07:45:22.005Z"
+        },
+        {
+            "id": 6,
+            "form": {
+                "1565596393441": "b",
+                "1565596397671": "a"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:59:00.938Z",
+            "updated_at": "2019-08-11T07:59:00.943Z"
+        },
+        {
+            "id": 7,
+            "form": {
+                "1565596393441": "b",
+                "1565596397671": "a"
+            },
+            "work": 8,
+            "created_at": "2019-08-11T07:59:37.065Z",
+            "updated_at": "2019-08-11T07:59:37.070Z"
+        }
+      ]
+    }
+   */
+  fetchFormsOfWork ({ commit, state, dispatch }, workId) {
+    // 可以 return Promise
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/formDetailOfWork',
+      loading_name: 'queryFormsOfWork_loading',
+      successMsg: '表单查询完毕'
+    }).get(`/works/form/query/${workId}`)
+  },
+  setWorkAsTemplate ({ commit, state, dispatch }, workId) {
+    new AxiosWrapper({
+      dispatch,
+      commit,
+      // name: 'editor/formDetailOfWork',
+      loading_name: 'setWorkAsTemplate_loading',
+      successMsg: '设置为模板成功'
+    }).post(`/works/set-as-template/${workId || state.work.id}`)
+  },
+  useTemplate ({ commit, state, dispatch }, workId) {
+    return new AxiosWrapper({
+      dispatch,
+      commit,
+      // name: 'editor/formDetailOfWork',
+      loading_name: 'useTemplate_loading',
+      successMsg: '使用模板成功'
+    }).post(`/works/use-template/${workId}`)
+  },
+  uploadCover ({ commit, state, dispatch }, { file } = {}) {
+    const formData = new FormData()
+    formData.append('files', file, `${+new Date()}.png`)
+    formData.append('workId', state.work.id)
+    return new AxiosWrapper({
+      dispatch,
+      commit,
+      name: 'editor/setWorkCover',
+      loading_name: 'uploadWorkCover_loading',
+      successMsg: '上传封面图成功!'
+    // }).post(`/works/uploadCover/${state.work.id}`, formData)
+    }).post(`/upload/`, formData)
+  }
+}
+
+// mutations
+export const mutations = {
+  /**
+   *
+   * @param {*} state
+   * @param {Object} payload
+   *
+    value example: [
+      {
+        "id": 1,
+        "name": "1567769149231.png",
+        "hash": "1660b11229e7473b90f99a9f9afe7675",
+        "sha256": "lKl7f_csUAgOjf0VRYkBZ64EcTjvt4Dt4beNIhELpTU",
+        "ext": ".png",
+        "mime": "image/png",
+        "size": "6.57",
+        "url": "/uploads/1660b11229e7473b90f99a9f9afe7675.png",
+        "provider": "local",
+        "public_id": null,
+        "created_at": "2019-09-06T11:25:49.255Z",
+        "updated_at": "2019-09-06T11:25:49.261Z",
+        "related": []
+      }
+    ]
+   */
+  setWorkCover (state, { type, value }) {
+    const [cover] = value
+    state.work.cover_image_url = cover.url
+  },
+  /**
+   * payload: {
+   *  type:   @params {String} "editor/setWorks",
+   *  value:  @params {Array}  work list
+   * }
+   */
+  setWorks (state, { type, value }) {
+    value.sort((a, b) => b.id - a.id)
+    state.works = value
+  },
+  /**
+   * payload: {
+   *  type:   @params {String} "editor/setWorks",
+   *  value:  @params {Array}  work list
+   * }
+   */
+  setWorkTemplates (state, { type, value }) {
+    value.sort((a, b) => b.id - a.id)
+    state.workTemplates = value
+  },
+  setWork (state, work) {
+    window.__work = work
+    work.pages = work.pages.map(page => {
+      page.elements = page.elements.map(element => new Element(element))
+      return new Page(page)
+    })
+    state.work = new Work(work)
+  },
+  previewWork (state, { type, value }) {},
+  deployWork (state, { type, value }) {},
+  formDetailOfWork (state, { type, value }) {
+    state.formDetailOfWork = value
+  }
+}