fix init

src/layout/components/TopBar/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-menu class="topbar-menu" :ellipsis="false" :default-active="activeMenu" :active-text-color="theme" mode="horizontal">
+    <sidebar-item :key="route.path + index" v-for="(route, index) in topMenus" :item="route" :base-path="route.path" />
+
+    <el-sub-menu index="more" class="el-sub-menu__hide-arrow" v-if="moreRoutes.length > 0">
+      <template #title>
+        <span>更多菜单</span>
+      </template>
+      <sidebar-item :key="route.path + index" v-for="(route, index) in moreRoutes" :item="route" :base-path="route.path" />
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script setup>
+import SidebarItem from '../Sidebar/SidebarItem'
+import {useAppStore} from '@/store/modules/app'
+import {useSettingsStore} from '@/store/modules/settings'
+import {usePermissionStore} from '@/store/modules/permission'
+
+const route = useRoute()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()
+
+const sidebarRouters = computed(() => permissionStore.sidebarRouters)
+const theme = computed(() => settingsStore.theme)
+const device = computed(() => appStore.device)
+const activeMenu = computed(() => {
+  const { meta, path } = route
+  if (meta.activeMenu) {
+    return meta.activeMenu
+  }
+  return path
+})
+
+const visibleNumber = ref(5)
+const topMenus = computed(() => {
+  return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(0, visibleNumber.value)
+})
+const moreRoutes = computed(() => {
+  return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(visibleNumber.value, sidebarRouters.value.length - visibleNumber.value)
+})
+function setVisibleNumber() {
+  let width = document.body.getBoundingClientRect().width
+  if (width >= 1000) {
+    width -= 500
+  }
+  visibleNumber.value = parseInt(width / 3 / 85)
+}
+
+onMounted(() => {
+  window.addEventListener('resize', setVisibleNumber)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', setVisibleNumber)
+})
+
+onMounted(() => {
+  setVisibleNumber()
+})
+</script>
+
+<style lang="scss">
+
+/* menu item */
+#app .topbar-menu.el-menu--horizontal .el-sub-menu__title, #app .topbar-menu.el-menu--horizontal .el-menu-item {
+  padding: 0 10px !important;
+}
+
+.topbar-menu.el-menu--horizontal > .el-menu-item {
+  float: left;
+  height: 50px !important;
+  line-height: 50px !important;
+  color: #303133 !important;
+  padding: 0 5px !important;
+  margin: 0 10px !important;
+}
+
+.el-sub-menu.is-active .svg-icon, .el-menu-item.is-active .svg-icon + span, .el-sub-menu.is-active .svg-icon + span, .el-sub-menu.is-active .el-sub-menu__title span {
+  color: v-bind(theme);
+}
+
+/* sub-menu item */
+.topbar-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
+  float: left;
+  line-height: 50px !important;
+  color: #303133 !important;
+  margin: 0 15px -3px!important;
+}
+
+/* topbar more arrow */
+.topbar-menu .el-sub-menu .el-sub-menu__icon-arrow {
+  position: static;
+  margin-left: 8px;
+  margin-top: 0px;
+  display: block !important;
+}
+
+/* menu__title el-menu-item */
+.topbar-menu.el-menu--horizontal .el-sub-menu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
+  height: 60px;
+}
+</style>

src/layout/components/TopBar/search.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="layout-search-dialog">
+    <el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false" width="600px" top="12vh">
+      <div class="layout-search-dialog__content">
+        <el-autocomplete
+          ref="layoutMenuAutocompleteRef"
+          v-model="state.menuQuery"
+          class="layout-search-dialog__autocomplete"
+          :fetch-suggestions="menuSearch"
+          placeholder="搜索"
+          :fit-input-width="true"
+          @select="onHandleSelect"
+        >
+          <template #prefix>
+            <svg-icon class-name="search-icon" icon-class="search" />
+          </template>
+          <template #default="{ item }">
+            <div>
+              <svg-icon :icon-class="item.icon" class="mr5" />
+              {{ item.title }}
+            </div>
+          </template>
+        </el-autocomplete>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="layoutBreadcrumbSearch">
+import { getNormalPath } from '@/utils/ruoyi';
+import { isHttp } from '@/utils/validate';
+import { usePermissionStore } from '@/store/modules/permission';
+import { RouteRecordRaw } from 'vue-router';
+type Router = Array<{
+  path: string;
+  icon: string;
+  title: string[];
+}>;
+type SearchState<T = any> = {
+  isShowSearch: boolean;
+  menuQuery: string;
+  menuList: T[];
+};
+// 定义变量内容
+const layoutMenuAutocompleteRef = ref();
+const router = useRouter();
+const routes = computed(() => usePermissionStore().routes);
+const state = reactive<SearchState>({
+  isShowSearch: false,
+  menuQuery: '',
+  menuList: []
+});
+
+// 搜索弹窗打开
+const openSearch = () => {
+  state.menuQuery = '';
+  state.isShowSearch = true;
+  state.menuList = generateRoutes(routes.value as any);
+  nextTick(() => {
+    setTimeout(() => {
+      layoutMenuAutocompleteRef.value.focus();
+    });
+  });
+};
+// 搜索弹窗关闭
+const closeSearch = () => {
+  state.isShowSearch = false;
+};
+// 菜单搜索数据过滤
+const menuSearch = (queryString: string, cb: (options: any[]) => void) => {
+  const options = state.menuList.filter((item) => {
+    return item.title.indexOf(queryString) > -1;
+  });
+  cb(options);
+};
+
+// Filter out the routes that can be displayed in the sidebar
+// And generate the internationalized title
+const generateRoutes = (routes: RouteRecordRaw[], basePath = '', prefixTitle: string[] = []) => {
+  let res: Router = [];
+  routes.forEach((r) => {
+    // skip hidden router
+    if (!r.hidden) {
+      const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
+      const data: any = {
+        path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
+        icon: r.meta?.icon,
+        title: [...prefixTitle]
+      };
+      if (r.meta && r.meta.title) {
+        data.title = [...data.title, r.meta.title];
+        if (r.redirect !== 'noRedirect') {
+          // only push the routes with title
+          // special case: need to exclude parent router without redirect
+          res.push(data);
+        }
+      }
+      // recursive child routes
+      if (r.children) {
+        const tempRoutes = generateRoutes(r.children, data.path, data.title);
+        if (tempRoutes.length >= 1) {
+          res = [...res, ...tempRoutes];
+        }
+      }
+    }
+  });
+  res.forEach((item: any) => {
+    if (item.title instanceof Array) {
+      item.title = item.title.join('/');
+    }
+  });
+  return res;
+};
+// 当前菜单选中时
+const onHandleSelect = (val: any) => {
+  const paths = val.path;
+  if (isHttp(paths)) {
+    // http(s):// 路径新窗口打开
+    const pindex = paths.indexOf('http');
+    window.open(paths.substring(pindex, paths.length), '_blank');
+  } else {
+    router.push(paths);
+  }
+  state.menuQuery = '';
+  closeSearch();
+};
+
+// 暴露变量
+defineExpose({
+  openSearch
+});
+</script>
+
+<style lang="scss" scoped>
+.layout-search-dialog {
+  :deep(.el-dialog) {
+    border-radius: var(--app-radius-base);
+    overflow: visible;
+    .el-dialog__header,
+    .el-dialog__footer {
+      display: none;
+    }
+    .el-dialog__body {
+      padding: 20px;
+    }
+  }
+
+  &__content {
+    width: 100%;
+  }
+
+  &__autocomplete {
+    width: 100%;
+  }
+
+  :deep(.el-input__wrapper) {
+    min-height: 44px;
+    border-radius: var(--app-radius-md);
+  }
+}
+</style>