├── .browserslistrc
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   └── style
    │   │   ├── index.scss
    │   │   └── variable.scss
    ├── shims-vue.d.ts
    ├── store
    │   └── index.ts
    ├── shims-tsx.d.ts
    ├── views
    │   └── Home.vue
    ├── main.ts
    ├── router
    │   └── index.ts
    ├── App.vue
    └── components
    │   └── EditorPage.vue
├── jest.config.js
├── .gitignore
├── tests
    └── unit
    │   └── example.spec.ts
├── .eslintrc.js
├── vue.config.js
├── tsconfig.json
├── README.md
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"],
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/staringos/tefact-example/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/staringos/tefact-example/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 |   import Vue from "vue";
3 |   export default Vue;
4 | }
5 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
3 | };
4 | 


--------------------------------------------------------------------------------
/src/assets/style/index.scss:
--------------------------------------------------------------------------------
1 | @import './variable.scss';
2 | 
3 | @import url("//at.alicdn.com/t/font_1758286_ssza4urx2ia.css");
4 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {},
 8 |   mutations: {},
 9 |   actions: {},
10 |   modules: {},
11 | });
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from "vue";
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <EditorPage />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import Vue from "vue";
 9 | import EditorPage from "@/components/EditorPage.vue"; // @ is an alias to /src
10 | 
11 | export default Vue.extend({
12 |   name: "Home",
13 |   components: {
14 |     EditorPage,
15 |   },
16 | });
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import Element from 'element-ui'
 6 | import 'element-ui/lib/theme-chalk/index.css';
 7 | 
 8 | Vue.use(Element)
 9 | 
10 | Vue.config.productionTip = false;
11 | 
12 | new Vue({
13 |   router,
14 |   store,
15 |   render: (h) => h(App),
16 | }).$mount("#app");
17 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.ts:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from "@vue/test-utils";
 2 | import HelloWorld from "@/components/HelloWorld.vue";
 3 | 
 4 | describe("EditorPage.vue", () => {
 5 |   it("renders props.msg when passed", () => {
 6 |     const msg = "new message";
 7 |     const wrapper = shallowMount(HelloWorld, {
 8 |       propsData: { msg },
 9 |     });
10 |     expect(wrapper.text()).toMatch(msg);
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter, { RouteConfig } from "vue-router";
 3 | import Home from "../views/Home.vue";
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | const routes: Array<RouteConfig> = [
 8 |   {
 9 |     path: "/",
10 |     name: "Home",
11 |     component: Home,
12 |   }
13 | ];
14 | 
15 | const router = new VueRouter({
16 |   mode: "history",
17 |   base: process.env.BASE_URL,
18 |   routes,
19 | });
20 | 
21 | export default router;
22 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="scss">
 8 | @import "assets/style/index";
 9 | 
10 | #app {
11 |   font-family: Avenir, Helvetica, Arial, sans-serif;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   text-align: center;
15 |   color: #2c3e50;
16 | }
17 | 
18 | #nav {
19 |   padding: 30px;
20 | 
21 |   a {
22 |     font-weight: bold;
23 |     color: #2c3e50;
24 | 
25 |     &.router-link-exact-active {
26 |       color: #42b983;
27 |     }
28 |   }
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     "plugin:vue/essential",
 8 |     "eslint:recommended",
 9 |     "@vue/typescript/recommended",
10 |     "@vue/prettier",
11 |     "@vue/prettier/@typescript-eslint",
12 |   ],
13 |   parserOptions: {
14 |     ecmaVersion: 2020,
15 |   },
16 |   rules: {
17 |     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
18 |     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
19 |     "@typescript-eslint/no-empty-function": "off"
20 |   },
21 |   overrides: [
22 |     {
23 |       files: [
24 |         "**/__tests__/*.{j,t}s?(x)",
25 |         "**/tests/unit/**/*.spec.{j,t}s?(x)",
26 |       ],
27 |       env: {
28 |         jest: true,
29 |       },
30 |     },
31 |   ],
32 | };
33 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | // eslint-disable-next-line @typescript-eslint/no-var-requires
 2 | const path = require('path')
 3 | 
 4 | function resolve (dir) {
 5 |     return path.join(__dirname, dir)
 6 | }
 7 | 
 8 | module.exports = {
 9 |     chainWebpack: config => {
10 |         console.log("chainWebpack");
11 | 
12 |         const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
13 |         types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
14 | 
15 |         config.resolve.alias
16 |             .set('TEFACT_EDITOR', resolve('./node_modules/@tefact/editor/src'))
17 |     },
18 | }
19 | 
20 | function addStyleResource (rule) {
21 |     rule.use('style-resource')
22 |         .loader('style-resources-loader')
23 |         .options({
24 |             patterns: [
25 |                 path.resolve(__dirname, './src/assets/style/variable.scss'),
26 |             ],
27 |         })
28 | }


--------------------------------------------------------------------------------
/src/assets/style/variable.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | // main
 3 | $mainColor: #3181DE;
 4 | $secondColor: #a1bede;
 5 | $thirdColor: #38b0e4;
 6 | $dangerColor: #f56c6c;
 7 | 
 8 | $borderColor: #e2e8f0;
 9 | $borderSecondColor: #E2E2EA;
10 | 
11 | $textMainColor: #919bae;
12 | 
13 | $editor-menu-color: #2c3d59;
14 | $editor-text-color: #000000cc;
15 | $editor-main-color: #00b4ff;
16 | $editor-border-active-color: #00b4ff;
17 | $editor-border-focus-color: #ff0000;
18 | 
19 | $editor-text-active-color: $editor-main-color;
20 | $editor-node-border-color: $editor-border-active-color;
21 | 
22 | 
23 | $bg-02: #f3f6fb;
24 | 
25 | $gray-01: #f1f2f5;
26 | $gray-02: #f4f7fd;
27 | $gray-03: #F5F7FA;
28 | $gray-05: #c0c4cc;
29 | 
30 | $mainColor: #3181DE;
31 | $borderColor: #e2e8f0;
32 | $defaultTextColor: #92929D;
33 | $mainTextColor: #414141;
34 | $defaultHover: #ebf3ff;
35 | $hoverBackground: #eaf2fc;
36 | 
37 | $editorBackground: #f0f2f5;
38 | 
39 | :export{
40 |   mainColor : $mainColor
41 | }
42 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "experimentalDecorators": true,
13 |     "noImplicitAny": false,
14 |     "sourceMap": true,
15 |     "resolveJsonModule": true,
16 |     "baseUrl": ".",
17 |     "types": [
18 |       "webpack-env",
19 |       "jest"
20 |     ],
21 |     "paths": {
22 |       "@/*": [
23 |         "src/*"
24 |       ]
25 |     },
26 |     "lib": [
27 |       "esnext",
28 |       "dom",
29 |       "dom.iterable",
30 |       "scripthost"
31 |     ]
32 |   },
33 |   "include": [
34 |     "src/**/*.ts",
35 |     "src/**/*.tsx",
36 |     "src/**/*.vue",
37 |     "tests/**/*.ts",
38 |     "tests/**/*.tsx"
39 |   ],
40 |   "exclude": [
41 |     "node_modules"
42 |   ]
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <img src="https://github.com/staringos/tefact/raw/master/docs/assets/images/logo-banner-2.png">
 3 | </div>
 4 | <div align="center">
 5 |   <a href="https://staringos.com">网站</a> | 
 6 |   <a href="http://saas.staringos.com">案例</a> | 
 7 |   <a href="https://staringos.com/docs">文档</a> | 
 8 |   <a href="https://staringos.com/docs/join-us">社区</a> | 
 9 |   <a href="https://staringos.com/docs/join-us">支持</a>
10 | </div>
11 | 
12 | <br />
13 | 
14 | <div align="center">
15 | 
16 | [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](https://github.com/Tefact/tefact-saas)
17 | [![Actions Status](https://github.com/tefact/tefact-saas/workflows/deploy/badge.svg)](https://github.com/tefact/tefact-saas/actions)
18 | [![Release Version](https://img.shields.io/badge/release-0.0.1-green.svg)](https://github.com/Tefact/tefact-saas/releases)
19 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Tefact/tefact-saas/pulls)
20 | [![Total alerts](https://img.shields.io/lgtm/alerts/g/Tefact/tefact-saas.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/Tefact/tefact-saas/alerts/)
21 | 
22 | </div>
23 | 
24 | [Tefact 低代码编辑器](https://github.com/staringos/tefact) 使用案例.
25 | 
26 | <img src="https://github.com/staringos/tefact/blob/master/docs/assets/images/show.gif" align="center" width="80%">
27 | 
28 | ## 安装依赖
29 | ```
30 | npm install
31 | ```
32 | 
33 | ### 开发模式启动
34 | 
35 | ```
36 | npm run serve
37 | ```
38 | 
39 | ### 生产模式打包
40 | ```
41 | npm run build
42 | ```
43 | 
44 | ### Lints and fixes files
45 | ```
46 | npm run lint
47 | ```
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tefact-emample",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "test:unit": "vue-cli-service test:unit",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "dependencies": {
12 |     "@tefact/editor": "0.0.2-alpha.9",
13 |     "core-js": "^3.6.5",
14 |     "element-ui": "^2.15.2",
15 |     "vue": "^2.6.11",
16 |     "vue-router": "^3.2.0",
17 |     "vuex": "^3.4.0"
18 |   },
19 |   "devDependencies": {
20 |     "@types/jest": "^24.0.19",
21 |     "@typescript-eslint/eslint-plugin": "^4.18.0",
22 |     "@typescript-eslint/parser": "^4.18.0",
23 |     "@vue/cli-plugin-babel": "~4.5.0",
24 |     "@vue/cli-plugin-eslint": "~4.5.0",
25 |     "@vue/cli-plugin-router": "~4.5.0",
26 |     "@vue/cli-plugin-typescript": "~4.5.0",
27 |     "@vue/cli-plugin-unit-jest": "~4.5.0",
28 |     "@vue/cli-plugin-vuex": "~4.5.0",
29 |     "@vue/cli-service": "~4.5.0",
30 |     "@vue/eslint-config-prettier": "^6.0.0",
31 |     "@vue/eslint-config-typescript": "^7.0.0",
32 |     "@vue/test-utils": "^1.0.3",
33 |     "eslint": "^6.7.2",
34 |     "eslint-plugin-prettier": "^3.3.1",
35 |     "eslint-plugin-vue": "^6.2.2",
36 |     "lint-staged": "^9.5.0",
37 |     "prettier": "^2.2.1",
38 |     "sass": "^1.26.5",
39 |     "sass-loader": "^8.0.2",
40 |     "style-resources-loader": "^1.4.1",
41 |     "typescript": "~4.1.5",
42 |     "vue-template-compiler": "^2.6.11"
43 |   },
44 |   "gitHooks": {
45 |     "pre-commit": "lint-staged"
46 |   },
47 |   "lint-staged": {
48 |     "*.{js,jsx,vue,ts,tsx}": [
49 |       "vue-cli-service lint",
50 |       "git add"
51 |     ]
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/components/EditorPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <div>
 4 |       <Editor
 5 |         :value="target"
 6 |         :editorSetting="settings"
 7 |         @addTarget="handleAddTarget"
 8 |         @editTarget="handleEditTarget"
 9 |         @share="handleShare"
10 |         @shareCancel="handleShareCancel"
11 |         @save="handleSave"
12 |         @back="handleGoBack"
13 |         @openModifier="handleOpenModifier"
14 |       ></Editor>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script lang="ts">
20 | import Vue from "vue";
21 | import Editor, { getDefaultFeature } from "@tefact/editor";
22 | 
23 | export default Vue.extend({
24 |   name: "EditorPage",
25 |   data() {
26 |     return {
27 |       target: getDefaultFeature("page"),
28 |       settings: {
29 |         app: {
30 |           id: new Date().getTime(),
31 |           type: "normal",
32 |         },
33 |         appType: "normal",
34 |         device: "pc",
35 |         uploadUrl: "",
36 |         formList: [],
37 |         datasetList: [],
38 | 
39 |         // target
40 |         onShare: () => {},
41 |         onPublish: () => {},
42 |         getTargetByIdHandler: () => {},
43 |         onGetTargetList: () => {},
44 |       },
45 |     };
46 |   },
47 |   props: {
48 |     msg: String,
49 |   },
50 |   components: {
51 |     Editor,
52 |   },
53 |   methods: {
54 |     handleAddTarget() {},
55 |     handleEditTarget() {},
56 |     handleShare() {},
57 |     handleShareCancel() {},
58 |     handleSave() {
59 |       alert("保存中...");
60 |     },
61 |     handleGoBack() {},
62 |     handleOpenModifier() {},
63 |   },
64 | });
65 | </script>
66 | 
67 | <!-- Add "scoped" attribute to limit CSS to this component only -->
68 | <style scoped lang="scss">
69 | h3 {
70 |   margin: 40px 0 0;
71 | }
72 | ul {
73 |   list-style-type: none;
74 |   padding: 0;
75 | }
76 | li {
77 |   display: inline-block;
78 |   margin: 0 10px;
79 | }
80 | a {
81 |   color: #42b983;
82 | }
83 | </style>
84 | 


--------------------------------------------------------------------------------