bqy_fe
4 years ago
parent
ea986f3e6e
commit
6471c17ac7
@ -1,57 +1,7 @@ |
||||
export const treeData = [ |
||||
{ |
||||
label: '一级 1', |
||||
children: [ |
||||
{ |
||||
label: '二级 1-1', |
||||
children: [ |
||||
{ |
||||
label: '三级 1-1-1' |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
label: '一级 2', |
||||
children: [ |
||||
{ |
||||
label: '二级 2-1', |
||||
children: [ |
||||
{ |
||||
label: '三级 2-1-1' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
label: '二级 2-2', |
||||
children: [ |
||||
{ |
||||
label: '三级 2-2-1' |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
label: '一级 3', |
||||
children: [ |
||||
{ |
||||
label: '二级 3-1', |
||||
children: [ |
||||
{ |
||||
label: '三级 3-1-1' |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
label: '二级 3-2', |
||||
children: [ |
||||
{ |
||||
label: '三级 3-2-1' |
||||
} |
||||
] |
||||
} |
||||
] |
||||
title: '首页', |
||||
path: '/', |
||||
isDefault: true |
||||
} |
||||
] |
||||
|
||||
@ -0,0 +1,115 @@ |
||||
/** |
||||
* @name: useVisualData |
||||
* @author: 卜启缘 |
||||
* @date: 2021/5/6 11:59 |
||||
* @description：useVisualData |
||||
* @update: 2021/5/6 11:59 |
||||
*/ |
||||
import { reactive, inject, readonly, computed, ComputedRef, DeepReadonly } from 'vue' |
||||
import { |
||||
VisualEditorModelValue, |
||||
VisualEditorBlockData, |
||||
VisualEditorPage, |
||||
VisualEditorConfig |
||||
} from '@/visual-editor/visual-editor.utils' |
||||
|
||||
import { visualConfig } from '@/visual.config' |
||||
|
||||
// 保存到本地JSON数据的key
|
||||
export const localKey = 'jsonData' |
||||
|
||||
// 注入jsonData的key
|
||||
export const injectKey = Symbol('injectKey') |
||||
|
||||
interface IState { |
||||
currentPage: VisualEditorPage // 当前正在操作的页面
|
||||
jsonData: VisualEditorModelValue // 整颗JSON树
|
||||
} |
||||
|
||||
export interface VisualData { |
||||
jsonData: DeepReadonly<VisualEditorModelValue> // 保护JSONData避免直接修改
|
||||
currentPage: ComputedRef<VisualEditorPage> // 当前正在操作的页面
|
||||
visualConfig: VisualEditorConfig // 组件配置
|
||||
updatePage: (data: { newPath?: string; oldPath: string; page: Partial<VisualEditorPage> }) => void // 更新某个页面
|
||||
incrementPage: (path: string, page: VisualEditorPage) => void // 新增页面
|
||||
deletePage: (path: string, redirect?: string) => void // 删除页面
|
||||
updatePageBlock: (path: string, blocks: VisualEditorBlockData[]) => void // 更新某页面下的所有组件
|
||||
setCurrentPage: (path: string) => void // 设置当前正在操作的页面
|
||||
} |
||||
|
||||
export const initVisualData = (): VisualData => { |
||||
const jsonData: VisualEditorModelValue = JSON.parse( |
||||
sessionStorage.getItem('jsonData') as string |
||||
) || { |
||||
container: { |
||||
width: 360, |
||||
height: 960 |
||||
}, |
||||
pages: { |
||||
'/': { |
||||
title: '首页', |
||||
blocks: [] |
||||
} |
||||
} |
||||
} |
||||
|
||||
console.log('jsonData：', jsonData) |
||||
// 获取当前页面哈希路径
|
||||
const getCurrentPath = () => location.hash.slice(1) |
||||
// 所有页面的path都必须以 / 开发
|
||||
const getPrefixPath = (path: string) => (path.startsWith('/') ? path : `/${path}`) |
||||
|
||||
const state: IState = reactive({ |
||||
jsonData, |
||||
currentPage: jsonData.pages[getCurrentPath()] ?? jsonData.pages['/'] |
||||
}) |
||||
|
||||
// 路由变化时更新当前操作的页面
|
||||
window.addEventListener('hashchange', () => { |
||||
setCurrentPage(getCurrentPath()) |
||||
}) |
||||
|
||||
// 更新page
|
||||
const updatePage = ({ newPath, oldPath, page }) => { |
||||
if (newPath && newPath != oldPath) { |
||||
// 如果传了新的路径，则认为是修改页面路由
|
||||
state.jsonData.pages[getPrefixPath(newPath)] = { ...state.jsonData.pages[oldPath], ...page } |
||||
deletePage(oldPath, getPrefixPath(newPath)) |
||||
} else { |
||||
Object.assign(state.jsonData.pages[oldPath], page) |
||||
} |
||||
} |
||||
// 添加page
|
||||
const incrementPage = (path = '', page: VisualEditorPage = { title: '新页面', blocks: [] }) => { |
||||
state.jsonData.pages[getPrefixPath(path)] = page |
||||
} |
||||
// 删除page
|
||||
const deletePage = (path = '', redirectPath = '') => { |
||||
delete state.jsonData.pages[path] |
||||
if (redirectPath) { |
||||
setCurrentPage(redirectPath) |
||||
} |
||||
} |
||||
// 设置当前页面
|
||||
const setCurrentPage = (path = '/') => { |
||||
state.currentPage = jsonData.pages[path] |
||||
} |
||||
|
||||
// 更新pages下面的blocks
|
||||
const updatePageBlock = (path = '', blocks: VisualEditorBlockData[] = []) => { |
||||
state.jsonData.pages[path].blocks = blocks |
||||
} |
||||
|
||||
return { |
||||
jsonData: readonly(state.jsonData), // 保护JSONData避免直接修改
|
||||
currentPage: computed(() => state.currentPage), |
||||
visualConfig, |
||||
setCurrentPage, |
||||
updatePage, |
||||
incrementPage, |
||||
deletePage, |
||||
updatePageBlock |
||||
} |
||||
} |
||||
|
||||
export const useVisualData = () => inject<VisualData>(injectKey)! |
||||
Loading…
Reference in new issue