From ea986f3e6edebb4661cff5421bede8d2f8d10556 Mon Sep 17 00:00:00 2001 From: bqy_fe <1743369777@qq.com> Date: Thu, 6 May 2021 00:35:05 +0800 Subject: [PATCH] feat: iframe preview --- .env.production | 2 +- .eslintrc.js | 56 +- package.json | 18 +- preview/App.vue | 19 + preview/index.html | 13 + preview/main.ts | 16 + preview/router.ts | 15 + preview/views/comp-render.tsx | 27 + preview/views/preview.vue | 67 + .../header => preview/views}/slot-item.vue | 0 .../base-widgets/number-range/index.tsx | 31 - .../number-range/number-range.scss | 24 - .../number-range/number-range.tsx | 30 - src/packages/base-widgets/select/index.tsx | 37 - .../components/common/simulator.vue | 3 +- src/visual-editor/components/header/index.vue | 22 +- .../components/header/preview.vue | 34 +- src/visual-editor/utils/index.ts | 8 + tsconfig.json | 2 +- vite.config.ts | 18 +- yarn.lock | 1982 +++++++++++++++-- 21 files changed, 2060 insertions(+), 364 deletions(-) create mode 100644 preview/App.vue create mode 100644 preview/index.html create mode 100644 preview/main.ts create mode 100644 preview/router.ts create mode 100644 preview/views/comp-render.tsx create mode 100644 preview/views/preview.vue rename {src/visual-editor/components/header => preview/views}/slot-item.vue (100%) delete mode 100644 src/packages/base-widgets/number-range/index.tsx delete mode 100644 src/packages/base-widgets/number-range/number-range.scss delete mode 100644 src/packages/base-widgets/number-range/number-range.tsx delete mode 100644 src/packages/base-widgets/select/index.tsx create mode 100644 src/visual-editor/utils/index.ts diff --git a/.env.production b/.env.production index 6bbd5f7..beb3671 100644 --- a/.env.production +++ b/.env.production @@ -1,7 +1,7 @@ # 只在生产模式中被载入 # 网站前缀 -VITE_BASE_URL = /vite-vue3-lowcode +VITE_BASE_URL = /vite-vue3-lowcode/ # 是否删除console VITE_DROP_CONSOLE = true diff --git a/.eslintrc.js b/.eslintrc.js index 999fffb..fa5c4b8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -23,38 +23,40 @@ module.exports = { ], rules: { 'vue/require-default-prop': 'off', + 'no-unused-vars': 'off', + '@typescript-eslint/no-unused-vars': 'off', '@typescript-eslint/ban-ts-comment': 'off', '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/ban-types': 'off', '@typescript-eslint/no-non-null-assertion': 'off', - '@typescript-eslint/explicit-module-boundary-types': 'off', - '@typescript-eslint/no-unused-vars': [ - 'error', - { - argsIgnorePattern: '^_', - varsIgnorePattern: '^_' - } - ], - 'no-unused-vars': [ - 'error', - { - argsIgnorePattern: '^_', - varsIgnorePattern: '^_' - } - ], - 'vue/html-self-closing': [ - 'error', - { - html: { - void: 'always', - normal: 'never', - component: 'always' - }, - svg: 'always', - math: 'always' - } - ] + '@typescript-eslint/explicit-module-boundary-types': 'off' + // '@typescript-eslint/no-unused-vars': [ + // 'error', + // { + // argsIgnorePattern: '^_', + // varsIgnorePattern: '^_' + // } + // ], + // 'no-unused-vars': [ + // 'error', + // { + // argsIgnorePattern: '^_', + // varsIgnorePattern: '^_' + // } + // ], + // 'vue/html-self-closing': [ + // 'error', + // { + // html: { + // void: 'always', + // normal: 'never', + // component: 'always' + // }, + // svg: 'always', + // math: 'always' + // } + // ] }, settings: {} } diff --git a/package.json b/package.json index 5e694f7..d1581a8 100644 --- a/package.json +++ b/package.json @@ -32,30 +32,30 @@ "@commitlint/cli": "^12.1.1", "@commitlint/config-conventional": "^12.1.1", "@types/node": "^14.14.41", - "@typescript-eslint/eslint-plugin": "^4.21.0", - "@typescript-eslint/parser": "^4.21.0", - "@vitejs/plugin-vue": "^1.2.1", - "@vitejs/plugin-vue-jsx": "^1.1.3", + "@typescript-eslint/eslint-plugin": "^4.22.1", + "@typescript-eslint/parser": "^4.22.1", + "@vitejs/plugin-vue": "^1.2.2", + "@vitejs/plugin-vue-jsx": "^1.1.4", "@vue/compiler-sfc": "^3.0.11", "commitizen": "^4.2.3", "cz-conventional-changelog": "^3.3.0", "cz-customizable": "^6.3.0", - "eslint": "^7.24.0", + "eslint": "^7.25.0", "eslint-config-prettier": "^8.1.0", "eslint-plugin-import": "^2.22.1", - "eslint-plugin-prettier": "^3.3.1", - "eslint-plugin-vue": "^7.8.0", + "eslint-plugin-prettier": "^3.4.0", + "eslint-plugin-vue": "^7.9.0", "husky": "^6.0.0", "lint-staged": "^10.5.4", "prettier": "^2.2.1", "sass": "^1.32.10", "typescript": "^4.2.4", - "vite": "^2.2.3", + "vite": "^2.2.4", "vite-plugin-components": "^0.8.4", "vite-plugin-style-import": "^0.10.0", "vite-plugin-windicss": "^0.14.6", "vue-eslint-parser": "^7.6.0", - "vue-tsc": "^0.0.25", + "vue-tsc": "^0.1.0", "windicss": "^2.5.14" }, "repository": { diff --git a/preview/App.vue b/preview/App.vue new file mode 100644 index 0000000..341525c --- /dev/null +++ b/preview/App.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/preview/index.html b/preview/index.html new file mode 100644 index 0000000..8c4c13e --- /dev/null +++ b/preview/index.html @@ -0,0 +1,13 @@ + + + + + + + 第二个页面 + + +
+ + + diff --git a/preview/main.ts b/preview/main.ts new file mode 100644 index 0000000..4d04e78 --- /dev/null +++ b/preview/main.ts @@ -0,0 +1,16 @@ +import { createApp } from 'vue' +import App from './App.vue' + +import router from './router' + +import '@/plugins/vant' + +const app = createApp(App) + +app.config.globalProperties.$$refs = {} + +// if (import.meta.env.DEV) { +window.$$refs = app.config.globalProperties.$$refs +// } + +app.use(router).mount('#app') diff --git a/preview/router.ts b/preview/router.ts new file mode 100644 index 0000000..59168d0 --- /dev/null +++ b/preview/router.ts @@ -0,0 +1,15 @@ +import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' + +const routes: Array = [ + { + path: '/:pathMatch(.*)*', + component: () => import('./views/preview.vue') + } +] + +const router = createRouter({ + history: createWebHashHistory(), + routes +}) + +export default router diff --git a/preview/views/comp-render.tsx b/preview/views/comp-render.tsx new file mode 100644 index 0000000..289b7d2 --- /dev/null +++ b/preview/views/comp-render.tsx @@ -0,0 +1,27 @@ +import { defineComponent } from 'vue' + +export default defineComponent({ + name: 'CompRender', + props: { + element: { + type: Object, + default: () => ({}) + }, + config: { + type: Object, + default: () => ({}) + } + }, + setup(props) { + return () => { + const component = props.config.componentMap[props.element.componentKey] + return component.render({ + size: {}, + props: props.element.props || {}, + model: {}, + block: props.element, + custom: {} + }) + } + } +}) diff --git a/preview/views/preview.vue b/preview/views/preview.vue new file mode 100644 index 0000000..0811d80 --- /dev/null +++ b/preview/views/preview.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/src/visual-editor/components/header/slot-item.vue b/preview/views/slot-item.vue similarity index 100% rename from src/visual-editor/components/header/slot-item.vue rename to preview/views/slot-item.vue diff --git a/src/packages/base-widgets/number-range/index.tsx b/src/packages/base-widgets/number-range/index.tsx deleted file mode 100644 index 16923c9..0000000 --- a/src/packages/base-widgets/number-range/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { NumberRange } from './number-range' -import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' - -export default { - key: 'number-range', - moduleName: 'baseWidgets', - label: '数字范围输入框', - resize: { - width: true - }, - preview: () => , - render: ({ model, size }) => { - return ( - - ) - }, - model: { - start: '起始绑定字段', - end: '截止绑定字段' - } -} as VisualEditorComponent diff --git a/src/packages/base-widgets/number-range/number-range.scss b/src/packages/base-widgets/number-range/number-range.scss deleted file mode 100644 index 93eaf6a..0000000 --- a/src/packages/base-widgets/number-range/number-range.scss +++ /dev/null @@ -1,24 +0,0 @@ -.number-range { - display: inline-flex; - width: 225px; - min-height: 40px; - align-items: stretch; - - & > div { - flex: 1; - - input { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - box-sizing: border-box; - } - } - - span { - margin: 0 8px; - display: inline-flex; - align-items: center; - } -} \ No newline at end of file diff --git a/src/packages/base-widgets/number-range/number-range.tsx b/src/packages/base-widgets/number-range/number-range.tsx deleted file mode 100644 index 3e4548c..0000000 --- a/src/packages/base-widgets/number-range/number-range.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { defineComponent } from 'vue' -import { useVModel } from '@vueuse/core' -import './number-range.scss' - -export const NumberRange = defineComponent({ - props: { - start: { type: String }, - end: { type: String } - }, - emits: { - 'update:start': (_?: string) => true, - 'update:end': (_?: string) => true - }, - setup(props) { - const startModel = useVModel(props, 'start') - const endModel = useVModel(props, 'end') - - return () => ( -
-
- -
- ~ -
- -
-
- ) - } -}) diff --git a/src/packages/base-widgets/select/index.tsx b/src/packages/base-widgets/select/index.tsx deleted file mode 100644 index 8b9e8ee..0000000 --- a/src/packages/base-widgets/select/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { ElOption, ElSelect } from 'element-plus' -import { createEditorTableProp } from '@/visual-editor/visual-editor.props' -import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' - -export default { - key: 'select', - moduleName: 'baseWidgets', - label: '下拉框', - preview: () => , - render: ({ props, model, custom }) => ( - opt.value).join(',')} - {...model.default} - > - {(props.options || []).map((opt: { label: string; value: string }, index: number) => ( - - ))} - - ), - props: { - options: createEditorTableProp({ - label: '下拉选项', - option: { - options: [ - { label: '显示值', field: 'label' }, - { label: '绑定值', field: 'value' }, - { label: '备注', field: 'comments' } - ], - showKey: 'label' - } - }) - }, - model: { - default: '绑定字段' - } -} as VisualEditorComponent diff --git a/src/visual-editor/components/common/simulator.vue b/src/visual-editor/components/common/simulator.vue index 81b2127..374ac70 100644 --- a/src/visual-editor/components/common/simulator.vue +++ b/src/visual-editor/components/common/simulator.vue @@ -21,7 +21,7 @@ export default defineComponent({ display: flex; align-items: center; justify-content: center; - //overflow: hidden auto; + @media (max-width: 1314px) { padding-right: 0; } @@ -35,6 +35,7 @@ export default defineComponent({ border-radius: 5px; box-shadow: 0 8px 12px #ebedf0; transform: translate(0); + overflow: auto; &::-webkit-scrollbar { width: 0; diff --git a/src/visual-editor/components/header/index.vue b/src/visual-editor/components/header/index.vue index f608bc3..39cc121 100644 --- a/src/visual-editor/components/header/index.vue +++ b/src/visual-editor/components/header/index.vue @@ -14,18 +14,19 @@ icon="el-icon-video-play" circle class="flex-shrink-0" - @click="isShowH5Preview = true" + @click="runPreview" /> - +