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