code-structure.md 3.72 KB

Code Structure

Front End

It is recommended to look at router.js first, and then start with front-end/h5/src/views/Editor.vue. Here is the entrance to the Editor.

front-end/h5/src                # source code for front end, includes: editor, work-manager, form-stat etc.
β”œβ”€β”€ assets
β”‚   β”œβ”€β”€ 403.svg
β”‚   β”œβ”€β”€ 404.svg
β”‚   β”œβ”€β”€ 500.svg
β”‚   β”œβ”€β”€ logo.png
β”‚   β”œβ”€β”€ placeholder-for-work.svg
β”‚   └── unauth-page-illustration.svg
β”œβ”€β”€ components
β”‚   β”œβ”€β”€ core                    # core
β”‚   β”‚   β”œβ”€β”€ editor              # editor module
β”‚   β”‚   β”‚   β”œβ”€β”€ canvas          # cavas:edit model + preview mode
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ edit.js     # canvas for edit mode
β”‚   β”‚   β”‚   β”‚   └── preview.js  # canvas for preview mode
β”‚   β”‚   β”‚   β”œβ”€β”€ edit-panel      # config panel for actions, plugin props, animation, actions etc.
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ action.js   #
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ props.js    #
β”‚   β”‚   β”‚   β”‚   └── script.js   #
β”‚   β”‚   β”‚   β”œβ”€β”€ header
β”‚   β”‚   β”‚   β”œβ”€β”€ modals
β”‚   β”‚   β”‚   β”‚   └── preview.vue # preivew modal
β”‚   β”‚   β”‚   β”œβ”€β”€ shortcuts-panel # the shortcut buttons for plugins
β”‚   β”‚   β”‚   β”‚   β”œβ”€β”€ index.js
β”‚   β”‚   β”‚   β”‚   └── shortcut-button.js
β”‚   β”‚   β”‚   └── index.js
β”‚   β”‚   β”œβ”€β”€ models              #
β”‚   β”‚   β”‚   β”œβ”€β”€ element.js      #
β”‚   β”‚   β”‚   β”œβ”€β”€ page.js         #
β”‚   β”‚   β”‚   └── work.js         #
β”‚   β”‚   β”œβ”€β”€ styles
β”‚   β”‚   β”‚   └── index.scss
β”‚   β”‚   └── support             #
β”‚   β”‚       └── shape.js        # drag&drop to change the shape of an element
β”‚   β”œβ”€β”€ plugins                 # plugin list: button, form (submit button + input box), text, pictures etc.
β”‚   β”‚   β”œβ”€β”€ lbp-button.js
β”‚   β”‚   β”œβ”€β”€ lbp-form-button.js
β”‚   β”‚   β”œβ”€β”€ lbp-form-input.js
β”‚   β”‚   β”œβ”€β”€ lbp-picture-placeholder.jpg
β”‚   β”‚   β”œβ”€β”€ lbp-picture.js
β”‚   β”‚   └── lbp-text.js
β”‚   └── HelloWorld.vue
β”œβ”€β”€ constants                  #
β”‚   └── api.js                 #
β”œβ”€β”€ mixins                     #
β”‚   └── load-plugins.js        # load plugins
β”œβ”€β”€ pages
β”‚   β”œβ”€β”€ editor                 # entry for editor
β”‚   β”œβ”€β”€ home
β”‚   └── index
β”œβ”€β”€ store
β”‚   β”œβ”€β”€ modules
β”‚   β”‚   β”œβ”€β”€ editor.js
β”‚   β”‚   β”œβ”€β”€ element.js
β”‚   β”‚   β”œβ”€β”€ loading.js
β”‚   β”‚   β”œβ”€β”€ page.js
β”‚   β”‚   β”œβ”€β”€ user.js
β”‚   β”‚   β”œβ”€β”€ visible.js
β”‚   β”‚   └── work.js
β”‚   β”œβ”€β”€ plugins               # vuex plugins
β”‚   β”‚   └── undo-redo         #
β”‚   β”‚       β”œβ”€β”€ History.js
β”‚   β”‚       └── index.js
β”‚   └── index.js
β”œβ”€β”€ utils
β”‚   β”œβ”€β”€ element.js
β”‚   β”œβ”€β”€ http.js
β”‚   └── strapi.js
β”œβ”€β”€ views
β”‚   β”œβ”€β”€ work-manager
β”‚   β”‚   β”œβ”€β”€ form-stat
β”‚   β”‚   β”‚   β”œβ”€β”€ column.js
β”‚   β”‚   β”‚   β”œβ”€β”€ detail.vue
β”‚   β”‚   β”‚   └── index.vue
β”‚   β”‚   β”œβ”€β”€ index.vue
β”‚   β”‚   └── list.vue
β”‚   β”œβ”€β”€ About.vue
β”‚   β”œβ”€β”€ Editor.vue           # a wrapper around the core editor, where the list of plug-ins is loaded
β”‚   └── Home.vue
β”œβ”€β”€ App.vue
β”œβ”€β”€ engine-entry.js          # preview engine for previewing and viewing mobie page on your phone
β”œβ”€β”€ main.js                  # entry for editor + work-manager
β”œβ”€β”€ registerServiceWorker.js
└── router.js                #

Editor + work-manager (work management page) entry