bqy_fe
4 years ago
parent
ea986f3e6e
commit
6471c17ac7
@ -1,57 +1,7 @@ |
|||||||
export const treeData = [ |
export const treeData = [ |
||||||
{ |
{ |
||||||
label: '一级 1', |
title: '首页', |
||||||
children: [ |
path: '/', |
||||||
{ |
isDefault: true |
||||||
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' |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
} |
} |
||||||
] |
] |
||||||
|
|||||||
@ -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