Skip to content

Commit 6471c17

Browse files
buqiyuanbuqiyuan
committed
feat: 添加页面
1 parent ea986f3 commit 6471c17

File tree

17 files changed

+352
-234
lines changed

17 files changed

+352
-234
lines changed

‎.eslintrc.js

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23,40 +23,38 @@ module.exports = {
2323
],
2424
rules: {
2525
'vue/require-default-prop': 'off',
26-
'no-unused-vars': 'off',
27-
'@typescript-eslint/no-unused-vars': 'off',
2826

2927
'@typescript-eslint/ban-ts-comment': 'off',
3028
'@typescript-eslint/no-explicit-any': 'off',
3129
'@typescript-eslint/ban-types': 'off',
3230
'@typescript-eslint/no-non-null-assertion': 'off',
33-
'@typescript-eslint/explicit-module-boundary-types': 'off'
34-
// '@typescript-eslint/no-unused-vars': [
35-
// 'error',
36-
// {
37-
// argsIgnorePattern: '^_',
38-
// varsIgnorePattern: '^_'
39-
// }
40-
// ],
41-
// 'no-unused-vars': [
42-
// 'error',
43-
// {
44-
// argsIgnorePattern: '^_',
45-
// varsIgnorePattern: '^_'
46-
// }
47-
// ],
48-
// 'vue/html-self-closing': [
49-
// 'error',
50-
// {
51-
// html: {
52-
// void: 'always',
53-
// normal: 'never',
54-
// component: 'always'
55-
// },
56-
// svg: 'always',
57-
// math: 'always'
58-
// }
59-
// ]
31+
'@typescript-eslint/explicit-module-boundary-types': 'off',
32+
'@typescript-eslint/no-unused-vars': [
33+
'error',
34+
{
35+
argsIgnorePattern: '^_',
36+
varsIgnorePattern: '^_'
37+
}
38+
],
39+
'no-unused-vars': [
40+
'error',
41+
{
42+
argsIgnorePattern: '^_',
43+
varsIgnorePattern: '^_'
44+
}
45+
],
46+
'vue/html-self-closing': [
47+
'error',
48+
{
49+
html: {
50+
void: 'always',
51+
normal: 'never',
52+
component: 'always'
53+
},
54+
svg: 'always',
55+
math: 'always'
56+
}
57+
]
6058
},
6159
settings: {}
6260
}

‎preview/App.vue

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
<template>
2-
<div>
3-
<router-view #="{ Component }">
4-
<component :is="Component" />
5-
</router-view>
6-
</div>
2+
<router-view #="{ Component, route }">
3+
<component :is="Component" :key="route.path" />
4+
</router-view>
75
</template>
86

97
<script lang="ts">
10-
export default {
11-
name: 'App'
12-
}
8+
import { defineComponent } from 'vue'
9+
10+
export default defineComponent({
11+
name: 'App',
12+
setup() {
13+
return {}
14+
}
15+
})
1316
</script>
1417

1518
<style>

‎preview/views/preview.vue

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
<template>
2-
<template v-for="outItem in jsonData" :key="outItem._vid">
2+
<template v-for="outItem in currentPage" :key="outItem._vid">
33
<slot-item :element="outItem" :config="visualConfig" />
44
</template>
55
</template>
66

7-
<script lang="tsx">
8-
import { defineComponent, PropType, reactive, toRefs } from 'vue'
7+
<script lang="ts">
8+
import { defineComponent, reactive, toRefs } from 'vue'
9+
import { Toast } from 'vant'
910
import { visualConfig } from '@/visual.config'
11+
import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils'
1012
import SlotItem from './slot-item.vue'
13+
import router from '../router'
14+
1115
/**
1216
* @name: preview
1317
* @author: 卜启缘
@@ -20,18 +24,28 @@ export default defineComponent({
2024
components: {
2125
SlotItem
2226
},
23-
emits: ['update:visible'],
24-
setup(props) {
27+
setup() {
28+
const jsonData: VisualEditorModelValue = JSON.parse(localStorage.getItem('jsonData') as string)
29+
if (!jsonData || !Object.keys(jsonData.pages)) {
30+
Toast.fail('当前没有可以预览的页面！')
31+
}
32+
33+
const route = router.currentRoute
34+
2535
const state = reactive({
26-
jsonData: JSON.parse(sessionStorage.getItem('blocks') || '{}')
36+
currentPage: jsonData.pages[route.value.path]?.blocks
2737
})
38+
// 如果当前页面路由匹配不到，则重定向到首页
39+
if (!state.currentPage) {
40+
router.replace('/')
41+
}
2842
2943
// 渲染组件
3044
const renderCom = (element) => {
3145
if (Array.isArray(element)) {
3246
return element.map((item) => renderCom(item))
3347
}
34-
const component = props.config.componentMap[element.componentKey]
48+
const component = visualConfig.componentMap[element.componentKey]
3549
3650
return component.render({
3751
size: {},
@@ -54,11 +68,14 @@ export default defineComponent({
5468
<style lang="scss">
5569
.h5-preview {
5670
overflow: hidden;
71+
5772
.el-dialog__header {
5873
display: none;
5974
}
75+
6076
.simulator {
6177
padding-right: 0;
78+
6279
&::-webkit-scrollbar {
6380
width: 0;
6481
}

‎src/App.vue

Lines changed: 9 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,25 @@
11
<template>
2-
<!-- <router-view #="{ Component }">-->
3-
<!-- <component :is="Component" />-->
4-
<!-- </router-view>-->
5-
<visual-editor
6-
v-model="jsonData"
7-
:config="visualConfig"
8-
:form-data="formData"
9-
:custom-props="customProps"
10-
/>
2+
<visual-editor />
113
</template>
124

135
<script lang="ts">
14-
import { defineComponent, reactive, toRefs } from 'vue'
6+
import { defineComponent, provide } from 'vue'
157
import VisualEditor from '@/visual-editor/index.vue'
16-
import { visualConfig } from './visual.config'
8+
import { initVisualData, injectKey, localKey } from '@/visual-editor/hooks/useVisualData'
179
1810
export default defineComponent({
1911
name: 'App',
2012
components: { VisualEditor },
2113
setup() {
22-
const state = reactive({
23-
jsonData: {
24-
container: {
25-
height: 500,
26-
width: 800
27-
},
28-
blocks: JSON.parse(sessionStorage.getItem('blocks') || '[]')
29-
},
30-
formData: [],
31-
customProps: {}
32-
})
14+
const visualData = initVisualData()
15+
// 注入可视化编辑器所有配置
16+
provide(injectKey, visualData)
17+
18+
const { jsonData } = visualData
3319
3420
window.addEventListener('beforeunload', () => {
35-
sessionStorage.setItem('blocks', JSON.stringify(state.jsonData.blocks))
21+
sessionStorage.setItem(localKey, JSON.stringify(jsonData))
3622
})
37-
38-
return {
39-
...toRefs(state),
40-
visualConfig
41-
}
4223
}
4324
})
4425
</script>

‎src/visual-editor/components/header/index.vue

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,21 @@
2727
<script lang="ts">
2828
import { defineComponent, reactive, toRefs } from 'vue'
2929
import Preview from './preview.vue'
30+
import { useVisualData, localKey } from '@/visual-editor/hooks/useVisualData'
3031
3132
export default defineComponent({
3233
name: 'Header',
3334
components: { Preview },
34-
props: {
35-
jsonData: {
36-
type: Object,
37-
default: () => ({})
38-
}
39-
},
40-
setup(props) {
35+
setup() {
4136
const state = reactive({
4237
isShowH5Preview: false
4338
})
4439
40+
const { jsonData } = useVisualData()
41+
4542
const runPreview = () => {
46-
sessionStorage.setItem('blocks', JSON.stringify(props.jsonData.blocks))
43+
sessionStorage.setItem(localKey, JSON.stringify(jsonData))
44+
localStorage.setItem(localKey, JSON.stringify(jsonData))
4745
state.isShowH5Preview = true
4846
}
4947

‎src/visual-editor/components/header/preview.vue

Lines changed: 4 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,16 @@
22
<el-dialog v-model="dialogVisible" custom-class="h5-preview" :show-close="false" width="360px">
33
<iframe
44
style="width: 360px; height: 640px"
5-
:src="`${BASE_URL}preview/#/`"
5+
:src="previewUrl"
66
frameborder="0"
77
scrolling="auto"
88
></iframe>
99
</el-dialog>
1010
</template>
1111

1212
<script lang="tsx">
13-
import { defineComponent, reactive, watch, toRefs } from 'vue'
13+
import { defineComponent, reactive, toRefs } from 'vue'
1414
import { useVModel } from '@vueuse/core'
15-
import { cloneDeep } from 'lodash'
1615
import { BASE_URL } from '@/visual-editor/utils'
1716
/**
1817
* @name: preview
@@ -33,37 +32,11 @@ export default defineComponent({
3332
setup(props, { emit }) {
3433
const state = reactive({
3534
dialogVisible: useVModel(props, 'visible', emit),
36-
jsonDataClone: cloneDeep(props.jsonData)
35+
previewUrl: `${BASE_URL}preview/${location.hash}`
3736
})
3837
39-
watch(
40-
() => state.dialogVisible,
41-
(val) => {
42-
if (val) {
43-
state.jsonDataClone = cloneDeep(props.jsonData)
44-
}
45-
}
46-
)
47-
48-
const renderCom = (element) => {
49-
if (Array.isArray(element)) {
50-
return element.map((item) => renderCom(item))
51-
}
52-
const component = props.config.componentMap[element.componentKey]
53-
54-
return component.render({
55-
size: {},
56-
props: element.props || {},
57-
block: element,
58-
model: {},
59-
custom: {}
60-
})
61-
}
62-
6338
return {
64-
...toRefs(state),
65-
BASE_URL,
66-
renderCom
39+
...toRefs(state)
6740
}
6841
}
6942
})

0 commit comments

Comments
 (0)