p12608597
/
vite-vue3-lowcode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: page data local key

This commit is contained in:
bqy_fe 2021-05-27 23:44:56 +08:00
parent a0482d493b
commit 25b3d69041
8 changed files with 53 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -32,6 +32,16 @@
目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内， 目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值 然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
## 浏览器支持
本地开发推荐使用`Chrome 80+` 浏览器
支持现代浏览器, 不支持 IE
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
### 提交规范 ### 提交规范
- `feat` 增加新功能 - `feat` 增加新功能

2
preview/index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第二个页面</title> <title>效果页</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

12
preview/router.ts
View File

@ -1,4 +1,6 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils'
import { CacheEnum } from '@/enums'
const routes: Array<RouteRecordRaw> = [ const routes: Array<RouteRecordRaw> = [
{ {
@ -12,4 +14,14 @@ const router = createRouter({
routes routes
}) })
// 获取本地缓存的页面数据
const jsonData: VisualEditorModelValue = JSON.parse(
localStorage.getItem(CacheEnum.PAGE_DATA_KEY) as string
)
router.beforeEach((to) => {
document.title = jsonData?.pages?.[to.path]?.title ?? document.title
return true
})
export default router export default router

6
preview/views/preview.vue
View File

@ -8,6 +8,7 @@
import { defineComponent, reactive, toRefs } from 'vue' import { defineComponent, reactive, toRefs } from 'vue'
import { Toast } from 'vant' import { Toast } from 'vant'
import { visualConfig } from '@/visual.config' import { visualConfig } from '@/visual.config'
import { CacheEnum } from '@/enums'
import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils' import { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils'
import SlotItem from './slot-item.vue' import SlotItem from './slot-item.vue'
import router from '../router' import router from '../router'
@ -25,7 +26,10 @@ export default defineComponent({
SlotItem SlotItem
}, },
setup() { setup() {
const jsonData: VisualEditorModelValue = JSON.parse(localStorage.getItem('jsonData') as string) const jsonData: VisualEditorModelValue = JSON.parse(
localStorage.getItem(CacheEnum.PAGE_DATA_KEY) as string
)
if (!jsonData || !Object.keys(jsonData.pages)) { if (!jsonData || !Object.keys(jsonData.pages)) {
Toast.fail('当前没有可以预览的页面！') Toast.fail('当前没有可以预览的页面！')
} }

14
src/enums/index.ts Normal file
View File

@ -0,0 +1,14 @@
/**
* @name: index
* @author: 卜启缘
* @date: 2021/5/26 22:55
* @description：常用的枚举类型
* @update: 2021/5/26 22:55
*/
/**
* @description 本地缓存枚举
*/
export enum CacheEnum {
PAGE_DATA_KEY = 'PAGE_DATA_KEY'
}

2
src/packages/container-component/index.ts
View File

@ -7,5 +7,5 @@ Object.keys(modules).forEach((key: string) => {
components[name] = modules[key]?.default || modules[key] components[name] = modules[key]?.default || modules[key]
}) })
console.log(components, 'base-widgets') console.log(components, 'container-component')
export default components export default components

10
src/visual-editor/components/left-aside/components/page-tree/index.vue
View File

@ -68,6 +68,7 @@
import { defineComponent, reactive, computed, toRefs } from 'vue' import { defineComponent, reactive, computed, toRefs } from 'vue'
import { useVisualData } from '@/visual-editor/hooks/useVisualData' import { useVisualData } from '@/visual-editor/hooks/useVisualData'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
export default defineComponent({ export default defineComponent({
name: 'PageTree', name: 'PageTree',
@ -137,6 +138,9 @@ export default defineComponent({
// 新增或编辑页面 // 新增或编辑页面
const onSubmit = async () => { const onSubmit = async () => {
const { title, path } = state.form const { title, path } = state.form
if (title.trim() == '' || path.trim() == '') {
return ElMessage.error('标题或路径不能为空！')
}
if (state.operatePageData) { if (state.operatePageData) {
updatePage({ newPath: path, oldPath: state.operatePageData.path || path, page: { title } }) updatePage({ newPath: path, oldPath: state.operatePageData.path || path, page: { title } })
await router.replace(path) await router.replace(path)
@ -164,11 +168,11 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-tree-node { .custom-tree-node {
flex: 1;
display: flex; display: flex;
padding-right: 8px;
font-size: 14px;
flex: 1;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 14px;
padding-right: 8px;
} }
</style> </style>

5
src/visual-editor/hooks/useVisualData.ts
View File

@ -15,9 +15,10 @@ import {
} from '@/visual-editor/visual-editor.utils' } from '@/visual-editor/visual-editor.utils'
import { visualConfig } from '@/visual.config' import { visualConfig } from '@/visual.config'
import { CacheEnum } from '@/enums'
// 保存到本地JSON数据的key // 保存到本地JSON数据的key
export const localKey = 'jsonData' export const localKey = CacheEnum.PAGE_DATA_KEY
// 注入jsonData的key // 注入jsonData的key
export const injectKey = Symbol('injectKey') export const injectKey = Symbol('injectKey')
@ -41,7 +42,7 @@ export interface VisualData {
export const initVisualData = (): VisualData => { export const initVisualData = (): VisualData => {
const jsonData: VisualEditorModelValue = JSON.parse( const jsonData: VisualEditorModelValue = JSON.parse(
sessionStorage.getItem('jsonData') as string sessionStorage.getItem(localKey) as string
) || { ) || {
container: { container: {
width: 360, width: 360,