initHeader
This commit is contained in:
23
frontend/src/layouts/components/Header/ToolBarLeft.vue
Normal file
23
frontend/src/layouts/components/Header/ToolBarLeft.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="tool-bar-lf">
|
||||
<CollapseIcon id="collapseIcon" />
|
||||
<Breadcrumb v-show="globalStore.breadcrumb" id="breadcrumb" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGlobalStore } from "@/stores/modules/global";
|
||||
import CollapseIcon from "./components/CollapseIcon.vue";
|
||||
import Breadcrumb from "./components/Breadcrumb.vue";
|
||||
const globalStore = useGlobalStore();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tool-bar-lf {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
51
frontend/src/layouts/components/Header/ToolBarRight.vue
Normal file
51
frontend/src/layouts/components/Header/ToolBarRight.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="tool-bar-ri">
|
||||
<!-- <div class="header-icon">-->
|
||||
<!-- <AssemblySize id="assemblySize" />-->
|
||||
<!-- <Language id="language" />-->
|
||||
<!-- <SearchMenu id="searchMenu" />-->
|
||||
<!-- <ThemeSetting id="themeSetting" />-->
|
||||
<!-- <Message id="message" />-->
|
||||
<!-- <Fullscreen id="fullscreen" />-->
|
||||
<!-- </div>-->
|
||||
<span class="username">{{ username }}</span>
|
||||
<Avatar />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
import AssemblySize from "./components/AssemblySize.vue";
|
||||
import Language from "./components/Language.vue";
|
||||
import SearchMenu from "./components/SearchMenu.vue";
|
||||
import ThemeSetting from "./components/ThemeSetting.vue";
|
||||
import Message from "./components/Message.vue";
|
||||
import Fullscreen from "./components/Fullscreen.vue";
|
||||
import Avatar from "./components/Avatar.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const username = computed(() => userStore.userInfo.name);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tool-bar-ri {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-right: 25px;
|
||||
.header-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
& > * {
|
||||
margin-left: 21px;
|
||||
color: var(--el-header-text-color);
|
||||
}
|
||||
}
|
||||
.username {
|
||||
margin: 0 20px;
|
||||
font-size: 15px;
|
||||
color: var(--el-header-text-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="setAssemblySize">
|
||||
<i :class="'iconfont icon-contentright'" class="toolBar-icon"></i>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="item in assemblySizeList"
|
||||
:key="item.value"
|
||||
:command="item.value"
|
||||
:disabled="assemblySize === item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useGlobalStore } from "@/stores/modules/global";
|
||||
import { AssemblySizeType } from "@/stores/interface";
|
||||
|
||||
const globalStore = useGlobalStore();
|
||||
const assemblySize = computed(() => globalStore.assemblySize);
|
||||
|
||||
const assemblySizeList = [
|
||||
{ label: "默认", value: "default" },
|
||||
{ label: "大型", value: "large" },
|
||||
{ label: "小型", value: "small" }
|
||||
];
|
||||
|
||||
const setAssemblySize = (item: AssemblySizeType) => {
|
||||
if (assemblySize.value === item) return;
|
||||
globalStore.setGlobalState("assemblySize", item);
|
||||
};
|
||||
</script>
|
||||
79
frontend/src/layouts/components/Header/components/Avatar.vue
Normal file
79
frontend/src/layouts/components/Header/components/Avatar.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click">
|
||||
<div class="avatar">
|
||||
<img src="@/assets/images/avatar.gif" alt="avatar" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="openDialog('infoRef')">
|
||||
<el-icon><User /></el-icon>{{ $t("header.personalData") }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="openDialog('passwordRef')">
|
||||
<el-icon><Edit /></el-icon>{{ $t("header.changePassword") }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="logout">
|
||||
<el-icon><SwitchButton /></el-icon>{{ $t("header.logout") }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- infoDialog -->
|
||||
<InfoDialog ref="infoRef"></InfoDialog>
|
||||
<!-- passwordDialog -->
|
||||
<PasswordDialog ref="passwordRef"></PasswordDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { LOGIN_URL } from "@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
import { logoutApi } from "@/api/modules/login";
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
import { ElMessageBox, ElMessage } from "element-plus";
|
||||
import InfoDialog from "./InfoDialog.vue";
|
||||
import PasswordDialog from "./PasswordDialog.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 退出登录
|
||||
const logout = () => {
|
||||
ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(async () => {
|
||||
// 1.执行退出登录接口
|
||||
await logoutApi();
|
||||
|
||||
// 2.清除 Token
|
||||
userStore.setToken("");
|
||||
|
||||
// 3.重定向到登陆页
|
||||
router.replace(LOGIN_URL);
|
||||
ElMessage.success("退出登录成功！");
|
||||
});
|
||||
};
|
||||
|
||||
// 打开修改密码和个人信息弹窗
|
||||
const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);
|
||||
const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
|
||||
const openDialog = (ref: string) => {
|
||||
if (ref == "infoRef") infoRef.value?.openDialog();
|
||||
if (ref == "passwordRef") passwordRef.value?.openDialog();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div :class="['breadcrumb-box mask-image', !globalStore.breadcrumbIcon && 'no-icon']">
|
||||
<el-breadcrumb :separator-icon="ArrowRight">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
|
||||
<div class="el-breadcrumb__inner is-link" @click="onBreadcrumbClick(item, index)">
|
||||
<el-icon v-show="item.meta.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">
|
||||
<component :is="item.meta.icon"></component>
|
||||
</el-icon>
|
||||
<span class="breadcrumb-title">{{ item.meta.title }}</span>
|
||||
</div>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { HOME_URL } from "@/config";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ArrowRight } from "@element-plus/icons-vue";
|
||||
import { useAuthStore } from "@/stores/modules/auth";
|
||||
import { useGlobalStore } from "@/stores/modules/global";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
const globalStore = useGlobalStore();
|
||||
|
||||
const breadcrumbList = computed(() => {
|
||||
let breadcrumbData = authStore.breadcrumbListGet[route.matched[route.matched.length - 1].path] ?? [];
|
||||
// 🙅♀️不需要首页面包屑可删除以下判断
|
||||
if (breadcrumbData[0].path !== HOME_URL) {
|
||||
breadcrumbData = [{ path: HOME_URL, meta: { icon: "HomeFilled", title: "首页" } }, ...breadcrumbData];
|
||||
}
|
||||
return breadcrumbData;
|
||||
});
|
||||
|
||||
// Click Breadcrumb
|
||||
const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
|
||||
if (index !== breadcrumbList.value.length - 1) router.push(item.path);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.breadcrumb-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
.el-breadcrumb {
|
||||
white-space: nowrap;
|
||||
.el-breadcrumb__item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
.el-breadcrumb__inner {
|
||||
display: inline-flex;
|
||||
&.is-link {
|
||||
color: var(--el-header-text-color);
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.breadcrumb-icon {
|
||||
margin-top: 2px;
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.breadcrumb-title {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
&:last-child .el-breadcrumb__inner,
|
||||
&:last-child .el-breadcrumb__inner:hover {
|
||||
color: var(--el-header-text-color-regular);
|
||||
}
|
||||
:deep(.el-breadcrumb__separator) {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-icon {
|
||||
.el-breadcrumb {
|
||||
.el-breadcrumb__item {
|
||||
top: -2px;
|
||||
:deep(.el-breadcrumb__separator) {
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<el-icon class="collapse-icon" @click="changeCollapse">
|
||||
<component :is="globalStore.isCollapse ? 'expand' : 'fold'"></component>
|
||||
</el-icon>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGlobalStore } from "@/stores/modules/global";
|
||||
|
||||
const globalStore = useGlobalStore();
|
||||
const changeCollapse = () => globalStore.setGlobalState("isCollapse", !globalStore.isCollapse);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.collapse-icon {
|
||||
margin-right: 20px;
|
||||
font-size: 22px;
|
||||
color: var(--el-header-text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="fullscreen">
|
||||
<i :class="['iconfont', isFullscreen ? 'icon-suoxiao' : 'icon-fangda']" class="toolBar-icon" @click="handleFullScreen"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import screenfull from "screenfull";
|
||||
|
||||
const isFullscreen = ref(screenfull.isFullscreen);
|
||||
|
||||
onMounted(() => {
|
||||
screenfull.on("change", () => {
|
||||
if (screenfull.isFullscreen) isFullscreen.value = true;
|
||||
else isFullscreen.value = false;
|
||||
});
|
||||
});
|
||||
|
||||
const handleFullScreen = () => {
|
||||
if (!screenfull.isEnabled) ElMessage.warning("当前您的浏览器不支持全屏 ❌");
|
||||
screenfull.toggle();
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="个人信息" width="500px" draggable>
|
||||
<span>This is userInfo</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const openDialog = () => {
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ openDialog });
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="changeLanguage">
|
||||
<i :class="'iconfont icon-zhongyingwen'" class="toolBar-icon"></i>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="item in languageList"
|
||||
:key="item.value"
|
||||
:command="item.value"
|
||||
:disabled="language === item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { computed } from "vue";
|
||||
import { useGlobalStore } from "@/stores/modules/global";
|
||||
import { LanguageType } from "@/stores/interface";
|
||||
|
||||
const i18n = useI18n();
|
||||
const globalStore = useGlobalStore();
|
||||
const language = computed(() => globalStore.language);
|
||||
|
||||
const languageList = [
|
||||
{ label: "简体中文", value: "zh" },
|
||||
{ label: "English", value: "en" }
|
||||
];
|
||||
|
||||
const changeLanguage = (lang: string) => {
|
||||
i18n.locale.value = lang;
|
||||
globalStore.setGlobalState("language", lang as LanguageType);
|
||||
};
|
||||
</script>
|
||||
109
frontend/src/layouts/components/Header/components/Message.vue
Normal file
109
frontend/src/layouts/components/Header/components/Message.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="message">
|
||||
<el-popover placement="bottom" :width="310" trigger="click">
|
||||
<template #reference>
|
||||
<el-badge :value="5" class="item">
|
||||
<i :class="'iconfont icon-xiaoxi'" class="toolBar-icon"></i>
|
||||
</el-badge>
|
||||
</template>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="通知(5)" name="first">
|
||||
<div class="message-list">
|
||||
<div class="message-item">
|
||||
<img src="@/assets/images/msg01.png" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">一键三连 Geeker-Admin 🧡</span>
|
||||
<span class="message-date">一分钟前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-item">
|
||||
<img src="@/assets/images/msg02.png" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">一键三连 Geeker-Admin 💙</span>
|
||||
<span class="message-date">一小时前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-item">
|
||||
<img src="@/assets/images/msg03.png" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">一键三连 Geeker-Admin 💚</span>
|
||||
<span class="message-date">半天前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-item">
|
||||
<img src="@/assets/images/msg04.png" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">一键三连 Geeker-Admin 💜</span>
|
||||
<span class="message-date">一星期前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-item">
|
||||
<img src="@/assets/images/msg05.png" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">一键三连 Geeker-Admin 💛</span>
|
||||
<span class="message-date">一个月前</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="消息(0)" name="second">
|
||||
<div class="message-empty">
|
||||
<img src="@/assets/images/notData.png" alt="notData" />
|
||||
<div>暂无消息</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="代办(0)" name="third">
|
||||
<div class="message-empty">
|
||||
<img src="@/assets/images/notData.png" alt="notData" />
|
||||
<div>暂无代办</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const activeName = ref("first");
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 260px;
|
||||
line-height: 45px;
|
||||
}
|
||||
.message-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.message-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
.message-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 20px 0 5px;
|
||||
}
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.message-title {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.message-date {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
|
||||
<span>This is Password</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const openDialog = () => {
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
defineExpose({ openDialog });
|
||||
</script>
|
||||
113
frontend/src/layouts/components/Header/components/SearchMenu.vue
Normal file
113
frontend/src/layouts/components/Header/components/SearchMenu.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<div class="menu-search-dialog">
|
||||
<i :class="'iconfont icon-sousuo'" class="toolBar-icon" @click="handleOpen"></i>
|
||||
<el-dialog v-model="isShowSearch" destroy-on-close :modal="false" :show-close="false" fullscreen @click="closeSearch">
|
||||
<el-autocomplete
|
||||
ref="menuInputRef"
|
||||
v-model="searchMenu"
|
||||
value-key="path"
|
||||
placeholder="菜单搜索 ：支持菜单名称、路径"
|
||||
:fetch-suggestions="searchMenuList"
|
||||
@select="handleClickMenu"
|
||||
@click.stop
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
</template>
|
||||
<template #default="{ item }">
|
||||
<el-icon>
|
||||
<component :is="item.meta.icon"></component>
|
||||
</el-icon>
|
||||
<span> {{ item.meta.title }} </span>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick } from "vue";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useAuthStore } from "@/stores/modules/auth";
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
const menuList = computed(() => authStore.flatMenuListGet.filter(item => !item.meta.isHide));
|
||||
|
||||
const searchMenuList = (queryString: string, cb: Function) => {
|
||||
const results = queryString ? menuList.value.filter(filterNodeMethod(queryString)) : menuList.value;
|
||||
cb(results);
|
||||
};
|
||||
|
||||
// 打开搜索框
|
||||
const isShowSearch = ref(false);
|
||||
const menuInputRef = ref();
|
||||
const searchMenu = ref("");
|
||||
const handleOpen = () => {
|
||||
isShowSearch.value = true;
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
menuInputRef.value.focus();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 搜索窗关闭
|
||||
const closeSearch = () => {
|
||||
isShowSearch.value = false;
|
||||
};
|
||||
|
||||
// 筛选菜单
|
||||
const filterNodeMethod = (queryString: string) => {
|
||||
return (restaurant: Menu.MenuOptions) => {
|
||||
return (
|
||||
restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
|
||||
restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
// 点击菜单跳转
|
||||
const handleClickMenu = (menuItem: Menu.MenuOptions | Record<string, any>) => {
|
||||
searchMenu.value = "";
|
||||
if (menuItem.meta.isLink) window.open(menuItem.meta.isLink, "_blank");
|
||||
else router.push(menuItem.path);
|
||||
closeSearch();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.menu-search-dialog {
|
||||
:deep(.el-dialog) {
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
border-radius: 0 !important;
|
||||
box-shadow: unset !important;
|
||||
.el-dialog__header {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
:deep(.el-autocomplete) {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
width: 550px;
|
||||
transform: translateX(-50%);
|
||||
.el-input__wrapper {
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-autocomplete__popper {
|
||||
.el-icon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
span {
|
||||
margin: 0 0 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="theme-setting">
|
||||
<i :class="'iconfont icon-zhuti'" class="toolBar-icon" @click="openDrawer"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import mittBus from "@/utils/mittBus";
|
||||
const openDrawer = () => {
|
||||
mittBus.emit("openThemeDrawer");
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user