import { ref, unref, watch } from 'vue' import { useRouter, useRoute } from 'vue-router' const findViewIndex = (viewList, view) => { return viewList.findIndex(v => v.fullPath === view.fullPath) } export const useCacheView = (updateCache) => { const cacheViewList = ref([]) // 添加 const addCacheView = (path) => { // 判断是否需要添加 if (!cacheViewList.value.includes(path)) { cacheViewList.value.push(path) updateCache(cacheViewList.value) } } // 删除 const removeCacheView = (path) => { const index = cacheViewList.value.indexOf(path) if (index > -1) { cacheViewList.value.splice(index, 1) updateCache(cacheViewList.value) } } // 重置 const resetCacheList = () => { cacheViewList.value = [] updateCache(cacheViewList.value) } return { cacheViewList, addCacheView, removeCacheView, resetCacheList } } export const useActiveOrder = () => { const activeOrderList = ref([]) const updateActiveOrder = (view) => { const activeIndex = findViewIndex(activeOrderList.value, view) if (activeIndex > -1) activeOrderList.value.splice(activeIndex, 1) activeOrderList.value.push(view) } const removeActiveOrder = (view) => { const activeIndex = findViewIndex(activeOrderList.value, view) if (activeIndex > -1) activeOrderList.value.splice(activeIndex, 1) } const resetActiveOrderList = () => { activeOrderList.value = [] } const getNextActiveOrder = () => { const activeOrderListLength = activeOrderList.value.length if (activeOrderListLength > 2) { return activeOrderList.value[activeOrderListLength - 2] } } return { activeOrderList, updateActiveOrder, removeActiveOrder, resetActiveOrderList, getNextActiveOrder } } // activeView - ref({}) 当前激活的路由 export const useOpenedView = (homeView) => { const router = useRouter() const route = useRoute() const activeView = ref({}) const { updateActiveOrder, removeActiveOrder, resetActiveOrderList, getNextActiveOrder } = useActiveOrder() const isActiveView = (view) => { return unref(activeView).fullPath === view?.fullPath } const setActiveView = (view) => { activeView.value = view router.push(view.fullPath ?? view) } // TODO: 考虑固定打开的ViewList const openedViewList = ref([]) // 不再提供 const getHomeView = () => { // 下一个为当前路由match的上一个 if (homeView) { // 下一个为指定的首页 return homeView } else { if (route.matched.length > 1) { return route.matched[route.matched.length - 2] // () } else { return route.matched[0] } } } const getNextActiveView = () => { let nextActive = getNextActiveOrder() if (!nextActive) { // 如果已经是最后一个了(一般情况不允许删除), 特殊情况允许返回首页 nextActive = getHomeView() } return nextActive } watch(activeView, (val) => { updateActiveOrder(val) }, { immediate: true }) // 添加一个视图 const addOpenedView = (view) => { openedViewList.value.push(view) setActiveView(view) } // 修改一个视图 const updateOpenedView = (index, view) => { openedViewList.value.splice(index, 1, view) setActiveView(view) } // 关闭一个视图 const removeOpenedView = (view) => { if (isActiveView(view)) setActiveView(getNextActiveView()) // 获取上一个激活的 // 删除openedView时需要同时删除opened和active const index = findViewIndex(openedViewList.value, view) if (index > -1)openedViewList.value.splice(index, 1) removeActiveOrder(view) } // 关闭其他视图 view允许为空 const removeOtherView = (view) => { if (!isActiveView(view)) { setActiveView(view) } openedViewList.value = [activeView.value] } const findViewByOpenedViewList = (fullPath) => { return openedViewList.value.find(openedView => openedView.fullPath === fullPath) } // 关闭所有 const resetOpenedList = () => { resetActiveOrderList() // if (homeView) { openedViewList.value = [getHomeView()] setActiveView(getHomeView()) // } else { // // 默认方案 // openedViewList.value = [{ fullPath: '/', title: '首页' }] // setActiveView({ fullPath: '/', title: '首页' }) // } } return { activeView, openedViewList, addOpenedView, updateOpenedView, removeOpenedView, removeOtherView, resetOpenedList, setActiveView, findViewByOpenedViewList } }