import html from "html"; import { ref, onMounted, onUnmounted } from "vue"; import { useAppStore } from "../store/index.js"; import SvgIcon from "../components/icon/index.js"; import LayoutLogo from "./logo.js"; import { useDark, useFullscreen, useToggle } from "@vueuse/core"; import { ElMessage, ElMessageBox } from "element-plus"; import { useI18n } from "vue-i18n"; import { logout } from "../api/user.js"; import LayoutLocale from "./locale.js"; import router from "../router/index.js"; import { treeToList } from "../utils/index.js"; export default { components: { SvgIcon, LayoutLogo, LayoutLocale, ElMessage, ElMessageBox }, template: html`
{{ appStore.user.name }} {{$t('register')}}
`, setup() { const i18n = useI18n(); const appStore = useAppStore(); // const searchRef = ref(null); const searchLoading = ref(false); const searchModel = ref(""); const searchOptions = ref([]); const showSearch = ref(false); const hideSearch = () => { showSearch.value = false; }; const clickSearch = () => { showSearch.value = !showSearch.value; if (showSearch.value) { searchRef.value.focus(); } }; const searchMenu = (query) => { if (query) { try { searchLoading.value = true; const menus = treeToList(router.getRoutes().find((o) => o.path === "/").children); searchOptions.value = menus .filter((o) => !o.children || o.children.length === 0) .filter((o) => o.meta.fullName.indexOf(query) > -1); } finally { searchLoading.value = false; } } }; const searchChange = (route) => { if (!route.meta.isExternal) { router.push(route.meta.path); searchModel.value = ""; searchOptions.value = []; showSearch.value = false; } else { window.open(route.path); } }; // const isDark = useDark(); const toggleDark = useToggle(isDark); const toggleMenuCollapse = () => (appStore.isMenuCollapse = !appStore.isMenuCollapse); // const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(document.documentElement); const confirmLogout = async () => { try { await ElMessageBox.confirm(i18n.t("confirmLogout"), i18n.t("tip"), { type: "warning" }); logout(); } catch (error) { if (error === "cancel") { ElMessage({ type: "info", message: i18n.t("cancel"), }); } } }; return { appStore, showSearch, hideSearch, clickSearch, searchRef, searchLoading, searchModel, searchOptions, searchMenu, searchChange, isDark, toggleDark, toggleMenuCollapse, isFullscreen, toggleFullscreen, confirmLogout, }; }, };