1

src/components/HeaderSearch/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'show': show }" class="header-search">
+  <div :class="{ show: show }" class="header-search">
     <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
     <el-select
       ref="headerSearchSelectRef"
@@ -8,22 +8,27 @@
       filterable
       default-first-option
       remote
-      placeholder="Search"
+      placeholder="请输入菜单名称"
       class="header-search-select"
       @change="change"
     >
-      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
+      <el-option
+        v-for="option in options"
+        :key="option.item.path"
+        :value="option.item"
+        :label="option.item.title.join(' > ')"
+      />
     </el-select>
   </div>
 </template>
 
 <script setup>
-import Fuse from 'fuse.js'
-import { getNormalPath } from '@/utils/ruoyi'
-import { isHttp } from '@/utils/validate'
-import usePermissionStore from '@/store/modules/permission'
+import Fuse from "fuse.js";
+import { getNormalPath } from "@/utils/ruoyi";
+import { isHttp } from "@/utils/validate";
+import usePermissionStore from "@/store/modules/permission";
 
-const search = ref('');
+const search = ref("");
 const options = ref([]);
 const searchPool = ref([]);
 const show = ref(false);
@@ -33,15 +38,15 @@ const router = useRouter();
 const routes = computed(() => usePermissionStore().routes);
 
 function click() {
-  show.value = !show.value
+  show.value = !show.value;
   if (show.value) {
-    headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
+    headerSearchSelectRef.value && headerSearchSelectRef.value.focus();
   }
-};
+}
 function close() {
-  headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
-  options.value = []
-  show.value = false
+  headerSearchSelectRef.value && headerSearchSelectRef.value.blur();
+  options.value = [];
+  show.value = false;
 }
 function change(val) {
   const path = val.path;
@@ -54,15 +59,15 @@ function change(val) {
     if (query) {
       router.push({ path: path, query: JSON.parse(query) });
     } else {
-      router.push(path)
+      router.push(path);
     }
   }
 
-  search.value = ''
-  options.value = []
+  search.value = "";
+  options.value = [];
   nextTick(() => {
-    show.value = false
-  })
+    show.value = false;
+  });
 }
 function initFuse(list) {
   fuse.value = new Fuse(list, {
@@ -71,82 +76,87 @@ function initFuse(list) {
     location: 0,
     distance: 100,
     minMatchCharLength: 1,
-    keys: [{
-      name: 'title',
-      weight: 0.7
-    }, {
-      name: 'path',
-      weight: 0.3
-    }]
-  })
+    keys: [
+      {
+        name: "title",
+        weight: 0.7,
+      },
+      {
+        name: "path",
+        weight: 0.3,
+      },
+    ],
+  });
 }
 // Filter out the routes that can be displayed in the sidebar
 // And generate the internationalized title
-function generateRoutes(routes, basePath = '', prefixTitle = []) {
-  let res = []
+function generateRoutes(routes, basePath = "", prefixTitle = []) {
+  let res = [];
 
   for (const r of routes) {
     // skip hidden router
-    if (r.hidden) { continue }
-    const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
+    if (r.hidden) {
+      continue;
+    }
+    const p = r.path.length > 0 && r.path[0] === "/" ? r.path : "/" + r.path;
     const data = {
       path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
-      title: [...prefixTitle]
-    }
+      title: [...prefixTitle],
+    };
 
     if (r.meta && r.meta.title) {
-      data.title = [...data.title, r.meta.title]
+      data.title = [...data.title, r.meta.title];
 
-      if (r.redirect !== 'noRedirect') {
+      if (r.redirect !== "noRedirect") {
         // only push the routes with title
         // special case: need to exclude parent router without redirect
-        res.push(data)
+        res.push(data);
       }
     }
     if (r.query) {
-      data.query = r.query
+      data.query = r.query;
     }
 
     // recursive child routes
     if (r.children) {
-      const tempRoutes = generateRoutes(r.children, data.path, data.title)
+      const tempRoutes = generateRoutes(r.children, data.path, data.title);
       if (tempRoutes.length >= 1) {
-        res = [...res, ...tempRoutes]
+        res = [...res, ...tempRoutes];
       }
     }
   }
-  return res
+  return res;
 }
 function querySearch(query) {
-  if (query !== '') {
-    options.value = fuse.value.search(query)
+  if (query !== "") {
+    options.value = fuse.value.search(query);
   } else {
-    options.value = []
+    options.value = [];
   }
 }
 
 onMounted(() => {
   searchPool.value = generateRoutes(routes.value);
-})
+});
 
 watchEffect(() => {
-  searchPool.value = generateRoutes(routes.value)
-})
+  searchPool.value = generateRoutes(routes.value);
+});
 
 watch(show, (value) => {
   if (value) {
-    document.body.addEventListener('click', close)
+    document.body.addEventListener("click", close);
   } else {
-    document.body.removeEventListener('click', close)
+    document.body.removeEventListener("click", close);
   }
-})
+});
 
 watch(searchPool, (list) => {
-  initFuse(list)
-})
+  initFuse(list);
+});
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .header-search {
   font-size: 0 !important;
 
@@ -184,4 +194,4 @@ watch(searchPool, (list) => {
     }
   }
 }
-</style>
+</style>

src/layout/components/Navbar.vue

@@ -1,39 +1,57 @@
 <template>
   <div class="navbar">
-<!--    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
-    <hamburger id="hamburger-container" :is-active="appStore.newMenuShow" class="hamburger-container" @click="appStore.toggleNewMune" />
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
+    <!--    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
+    <hamburger
+      id="hamburger-container"
+      :is-active="appStore.newMenuShow"
+      class="hamburger-container"
+      @click="appStore.toggleNewMune"
+    />
+    <breadcrumb
+      id="breadcrumb-container"
+      class="breadcrumb-container"
+      v-if="!settingsStore.topNav"
+    />
+    <top-nav
+      id="topmenu-container"
+      class="topmenu-container"
+      v-if="settingsStore.topNav"
+    />
 
     <div class="right-menu">
       <template v-if="appStore.device !== 'mobile'">
         <header-search id="header-search" class="right-menu-item" />
 
-<!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
-<!--          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
-<!--        </el-tooltip>-->
+        <!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
+        <!--          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
+        <!--        </el-tooltip>-->
 
-<!--        <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
-<!--          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
-<!--        </el-tooltip>-->
+        <!--        <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
+        <!--          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
+        <!--        </el-tooltip>-->
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-<!--        <el-tooltip content="主题模式" effect="dark" placement="bottom">-->
-<!--          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">-->
-<!--            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />-->
-<!--            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />-->
-<!--          </div>-->
-<!--        </el-tooltip>-->
+        <!--        <el-tooltip content="主题模式" effect="dark" placement="bottom">-->
+        <!--          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">-->
+        <!--            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />-->
+        <!--            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />-->
+        <!--          </div>-->
+        <!--        </el-tooltip>-->
 
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
       </template>
       <div class="avatar-container">
-        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+        <el-dropdown
+          @command="handleCommand"
+          class="right-menu-item hover-effect"
+          trigger="click"
+        >
           <div class="avatar-wrapper">
-            <img :src="userStore.avatar" class="user-avatar" />
+            <!-- <img :src="userStore.avatar" class="user-avatar" /> -->
+            <img src="" class="user-avatar" />
             <el-icon><caret-bottom /></el-icon>
           </div>
           <template #dropdown>
@@ -56,26 +74,26 @@
 </template>
 
 <script setup>
-import {ElMessageBox} from 'element-plus'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import HeaderSearch from '@/components/HeaderSearch'
-import useAppStore from '@/store/modules/app'
-import useUserStore from '@/store/modules/user'
-import useSettingsStore from '@/store/modules/settings'
-
-const appStore = useAppStore()
-const userStore = useUserStore()
-const settingsStore = useSettingsStore()
-const showMenu = ()=>{
-  console.log(12313122)
-}
+import { ElMessageBox } from "element-plus";
+import Breadcrumb from "@/components/Breadcrumb";
+import TopNav from "@/components/TopNav";
+import Hamburger from "@/components/Hamburger";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import HeaderSearch from "@/components/HeaderSearch";
+import useAppStore from "@/store/modules/app";
+import useUserStore from "@/store/modules/user";
+import useSettingsStore from "@/store/modules/settings";
+
+const appStore = useAppStore();
+const userStore = useUserStore();
+const settingsStore = useSettingsStore();
+const showMenu = () => {
+  console.log(12313122);
+};
 
 function toggleSideBar() {
-  appStore.toggleSideBar()
+  appStore.toggleSideBar();
 }
 
 function handleCommand(command) {
@@ -92,28 +110,30 @@ function handleCommand(command) {
 }
 
 function logout() {
-  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    userStore.logOut().then(() => {
-      location.href = '/index';
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
     })
-  }).catch(() => { });
+    .catch(() => {});
 }
 
-const emits = defineEmits(['setLayout'])
+const emits = defineEmits(["setLayout"]);
 function setLayout() {
-  emits('setLayout');
+  emits("setLayout");
 }
 
 function toggleTheme() {
-  settingsStore.toggleTheme()
+  settingsStore.toggleTheme();
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .navbar {
   height: 50px;
   overflow: hidden;
@@ -181,7 +201,7 @@ function toggleTheme() {
 
         svg {
           transition: transform 0.3s;
-          
+
           &:hover {
             transform: scale(1.15);
           }