@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
271 lines (268 loc) • 10.7 kB
JavaScript
import { defineComponent, ref, reactive, nextTick, onMounted, onUnmounted, watch, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, unref, withCtx, Fragment, renderList, normalizeClass, toDisplayString } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import { storeToRefs } from 'pinia';
import '../../stores/index.mjs';
import emitter from '../../utils/emit/index.mjs';
import { useRoutesList } from '../../stores/routesList.mjs';
import { useThemeConfig } from '../../stores/themeConfig.mjs';
const _hoisted_1 = { class: "layout-columns-aside" };
const _hoisted_2 = { class: "layout-logo" };
const _hoisted_3 = ["src"];
const _hoisted_4 = ["onClick", "onMouseenter", "title"];
const _hoisted_5 = { class: "columns-vertical-title font12" };
const _hoisted_6 = ["href"];
const _hoisted_7 = { class: "columns-vertical-title font12" };
var _sfc_main = /* @__PURE__ */ defineComponent({
__name: "columnsAside",
setup(__props) {
const columnsAsideOffsetTopRefs = ref([]);
const columnsAsideActiveRef = ref();
const stores = useRoutesList();
const storesThemeConfig = useThemeConfig();
const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores);
const { themeConfig } = storeToRefs(storesThemeConfig);
const route = useRoute();
const router = useRouter();
const state = reactive({
columnsAsideList: [],
liIndex: 0,
liOldIndex: null,
liHoverIndex: null,
liOldPath: null,
difference: 0,
routeSplit: []
});
const setColumnsAsideMove = (k) => {
if (k === void 0) return false;
state.liIndex = k;
columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
};
const onColumnsAsideMenuClick = async (v) => {
let { path, redirect } = v;
if (redirect) {
onColumnsAsideDown(v.k);
if (route.path.startsWith(redirect)) emitter.emit("setSendColumnsChildren", setSendChildren(redirect));
else router.push(redirect);
} else {
if (!v.children || v.children?.length === 0) {
router.push(path);
onColumnsAsideDown(v.k);
} else {
const resData = setSendChildren(path);
if (Object.keys(resData).length <= 0) return false;
onColumnsAsideDown(resData.item?.k);
emitter.emit("setSendColumnsChildren", resData);
}
}
if (!v.children || v.children?.length === 0) themeConfig.value.isCollapse = true;
else if (v.children.length > 1) themeConfig.value.isCollapse = false;
};
const onColumnsAsideMenuMouseenter = (v, k) => {
if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
let { path } = v;
state.liOldPath = path;
state.liOldIndex = k;
state.liHoverIndex = k;
emitter.emit("setSendColumnsChildren", setSendChildren(path));
stores.setColumnsMenuHover(false);
stores.setColumnsNavHover(true);
};
const onColumnsAsideMenuMouseleave = async () => {
if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
await stores.setColumnsNavHover(false);
setTimeout(() => {
if (!isColumnsMenuHover && !isColumnsNavHover) emitter.emit("restoreDefault");
}, 100);
};
const onColumnsAsideDown = (k) => {
nextTick(() => {
setColumnsAsideMove(k);
});
};
const setMenuAutoCollaps = (path) => {
const resData = setSendChildren(path);
!resData.item?.redirect && resData.children.length == 0 || resData.item?.redirect && resData.children.length <= 1 ? themeConfig.value.isCollapse = true : themeConfig.value.isCollapse = false;
return resData;
};
const setFilterRoutes = () => {
state.columnsAsideList = filterRoutesFun(routesList.value);
const resData = setMenuAutoCollaps(route.path);
onColumnsAsideDown(resData.item?.k);
setTimeout(() => {
emitter.emit("setSendColumnsChildren", resData);
}, 500);
};
const setSendChildren = (path) => {
const currentPathSplit = path.split("/");
let currentData = { children: [], item: void 0 };
const matched = state.columnsAsideList.find((v, k) => {
if (v.path === `/${currentPathSplit[1]}`) {
v["k"] = k;
return true;
}
return false;
});
if (matched) {
currentData.item = { ...matched };
currentData.children = matched.children ? [...matched.children] : [{ ...matched }];
}
return currentData;
};
const filterRoutesFun = (arr) => {
return arr.filter((item) => !item.meta?.isHide).map((item) => {
item = Object.assign({}, item);
if (item.children) item.children = filterRoutesFun(item.children);
return item;
});
};
const setColumnsMenuHighlight = (path) => {
state.routeSplit = path.split("/");
state.routeSplit.shift();
const routeFirst = `/${state.routeSplit[0]}`;
const currentSplitRoute = state.columnsAsideList.find((v) => v.path === routeFirst);
if (!currentSplitRoute) return false;
setTimeout(() => {
onColumnsAsideDown(currentSplitRoute.k);
}, 0);
};
onMounted(() => {
setFilterRoutes();
emitter.on("restoreDefault", () => {
state.liOldIndex = null;
state.liOldPath = null;
});
});
onUnmounted(() => {
emitter.off("restoreDefault", () => {
});
});
onBeforeRouteUpdate((to) => {
const resData = setMenuAutoCollaps(to.path);
setColumnsMenuHighlight(to.path);
emitter.emit("setSendColumnsChildren", resData);
});
watch(
[() => themeConfig.value.columnsAsideStyle, isColumnsMenuHover, isColumnsNavHover],
() => {
themeConfig.value.columnsAsideStyle === "columnsRound" ? state.difference = 3 : state.difference = 0;
if (!isColumnsMenuHover.value && !isColumnsNavHover.value) {
state.liHoverIndex = null;
emitter.emit("setSendColumnsChildren", setSendChildren(route.path));
} else {
state.liHoverIndex = state.liOldIndex;
if (!state.liOldPath) return false;
emitter.emit("setSendColumnsChildren", setSendChildren(state.liOldPath));
}
},
{
deep: true
}
);
return (_ctx, _cache) => {
const _component_SvgIcon = resolveComponent("SvgIcon");
const _component_el_scrollbar = resolveComponent("el-scrollbar");
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("img", {
src: unref(themeConfig).logoUrl,
class: "layout-logo-medium-img"
}, null, 8, _hoisted_3)
]),
createVNode(_component_el_scrollbar, null, {
default: withCtx(() => [
createElementVNode(
"ul",
{
onMouseleave: _cache[0] || (_cache[0] = ($event) => onColumnsAsideMenuMouseleave())
},
[
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(state.columnsAsideList, (v, k) => {
return openBlock(), createElementBlock("li", {
key: k,
onClick: ($event) => onColumnsAsideMenuClick(v),
onMouseenter: ($event) => onColumnsAsideMenuMouseenter(v, k),
ref_for: true,
ref: (el) => {
if (el) columnsAsideOffsetTopRefs.value[k] = el;
},
class: normalizeClass({ "layout-columns-active": state.liIndex === k, "layout-columns-hover": state.liHoverIndex === k }),
title: _ctx.$t(`message.menu.${v.meta.title}`)
}, [
!v.meta.isLink || v.meta.isLink && v.meta.isIframe ? (openBlock(), createElementBlock(
"div",
{
key: 0,
class: normalizeClass(unref(themeConfig).columnsAsideLayout)
},
[
createVNode(_component_SvgIcon, {
name: v.meta.icon
}, null, 8, ["name"]),
createElementVNode(
"div",
_hoisted_5,
toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
1
/* TEXT */
)
],
2
/* CLASS */
)) : (openBlock(), createElementBlock(
"div",
{
key: 1,
class: normalizeClass(unref(themeConfig).columnsAsideLayout)
},
[
createElementVNode("a", {
href: v.meta.isLink,
target: "_blank"
}, [
createVNode(_component_SvgIcon, {
name: v.meta.icon
}, null, 8, ["name"]),
createElementVNode(
"div",
_hoisted_7,
toDisplayString(_ctx.$t(`message.menu.${v.meta.title}`)),
1
/* TEXT */
)
], 8, _hoisted_6)
],
2
/* CLASS */
))
], 42, _hoisted_4);
}),
128
/* KEYED_FRAGMENT */
)),
createElementVNode(
"div",
{
ref_key: "columnsAsideActiveRef",
ref: columnsAsideActiveRef,
class: normalizeClass(unref(themeConfig).columnsAsideStyle)
},
null,
2
/* CLASS */
)
],
32
/* NEED_HYDRATION */
)
]),
_: 1
/* STABLE */
})
]);
};
}
});
export { _sfc_main as default };