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