bqy_fe
5 years ago
17 changed files with 352 additions and 234 deletions
@ -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