|  | @@ -1,6 +1,6 @@
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  | -  <div class="floating">
 | 
	
		
			
				|  |  | -    <div>
 | 
	
		
			
				|  |  | +  <div class="floating" ref="floatingRef">
 | 
	
		
			
				|  |  | +    <div ref="logoRef">
 | 
	
		
			
				|  |  |        <Logo/>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  |      <div style="height: 30px; padding: 0 8px 8px 8px" @click="expandMenu" id="tutorial_search_menu">
 | 
	
	
		
			
				|  | @@ -11,23 +11,20 @@
 | 
	
		
			
				|  |  |                  @input="searchInput"
 | 
	
		
			
				|  |  |                  placeholder="菜单太难找?在这里搜索。"/>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  | -    <div style="flex: 1;height: 0">
 | 
	
		
			
				|  |  | -      <el-scrollbar>
 | 
	
		
			
				|  |  | -        <el-menu
 | 
	
		
			
				|  |  | -            v-if="rendering"
 | 
	
		
			
				|  |  | -            ref="menuRef"
 | 
	
		
			
				|  |  | -            router
 | 
	
		
			
				|  |  | -            :collapse-transition="false"
 | 
	
		
			
				|  |  | -            :collapse="isCollapse"
 | 
	
		
			
				|  |  | -            :default-active="isSearch ? '' : activeMenu"
 | 
	
		
			
				|  |  | -            :unique-opened="isSearch ? false : expandOneMenu">
 | 
	
		
			
				|  |  | -          <menu-item-v2 v-for="item in isSearch ? searchData : menuData"
 | 
	
		
			
				|  |  | -                        :data="item"
 | 
	
		
			
				|  |  | -                        :menuText="menuText"/>
 | 
	
		
			
				|  |  | -        </el-menu>
 | 
	
		
			
				|  |  | -      </el-scrollbar>
 | 
	
		
			
				|  |  | -    </div>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | +    <el-scrollbar :style="barHeight">
 | 
	
		
			
				|  |  | +      <el-menu
 | 
	
		
			
				|  |  | +          v-if="rendering"
 | 
	
		
			
				|  |  | +          ref="menuRef"
 | 
	
		
			
				|  |  | +          router
 | 
	
		
			
				|  |  | +          :collapse-transition="false"
 | 
	
		
			
				|  |  | +          :collapse="isCollapse"
 | 
	
		
			
				|  |  | +          :default-active="isSearch ? '' : activeMenu"
 | 
	
		
			
				|  |  | +          :unique-opened="isSearch ? false : expandOneMenu">
 | 
	
		
			
				|  |  | +        <menu-item-v2 v-for="item in isSearch ? searchData : menuData"
 | 
	
		
			
				|  |  | +                      :data="item"
 | 
	
		
			
				|  |  | +                      :menuText="menuText"/>
 | 
	
		
			
				|  |  | +      </el-menu>
 | 
	
		
			
				|  |  | +    </el-scrollbar>
 | 
	
		
			
				|  |  |    </div>
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -47,8 +44,10 @@ import {getUserMenu} from "@/api/settings/menu-settings";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const menuText: Ref<string> = ref('')
 | 
	
		
			
				|  |  |  const menuRef = useCompRef(ElMenu)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  const menuData = ref(routerMenus.value)
 | 
	
		
			
				|  |  |  const rendering = ref(true)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  const isSearch = ref<boolean>(false)
 | 
	
		
			
				|  |  |  const searchData = ref([])
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -57,6 +56,7 @@ const searchActives = new Set()
 | 
	
		
			
				|  |  |  const searchInput: (val: string) => void = XEUtils.debounce(async (val: string) => {
 | 
	
		
			
				|  |  |    menuText.value = val;
 | 
	
		
			
				|  |  |    searchActives.clear();
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |    if (val) {
 | 
	
		
			
				|  |  |      searchData.value = treeSearch<{ metaTitle: string; }>(menuData.value, (item) => {
 | 
	
		
			
				|  |  |        const metaTitle: string = item.metaTitle
 | 
	
	
		
			
				|  | @@ -113,7 +113,13 @@ const expandMenu = () => {
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +const logoRef: Ref<HTMLHtmlElement | null> = ref(null)
 | 
	
		
			
				|  |  |  const searchRef: Ref<HTMLHeadElement | null> = ref(null)
 | 
	
		
			
				|  |  | +const floatingRef: Ref<HTMLHtmlElement | null> = ref(null)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const barHeight = reactive({
 | 
	
		
			
				|  |  | +  height: ''
 | 
	
		
			
				|  |  | +})
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const activeMenu = computed<string>(() => {
 | 
	
		
			
				|  |  |    const {meta, path} = route
 | 
	
	
		
			
				|  | @@ -127,7 +133,7 @@ const smoothScrolling = () => {
 | 
	
		
			
				|  |  |    const routerPath = document.getElementById(router.currentRoute.value.fullPath)
 | 
	
		
			
				|  |  |    if (!routerPath) return
 | 
	
		
			
				|  |  |    routerPath.scrollIntoView({
 | 
	
		
			
				|  |  | -    block: 'center',
 | 
	
		
			
				|  |  | +    block: 'start',
 | 
	
		
			
				|  |  |      inline: 'nearest',
 | 
	
		
			
				|  |  |      behavior: 'smooth'
 | 
	
		
			
				|  |  |    })
 | 
	
	
		
			
				|  | @@ -144,8 +150,9 @@ watch(() => router.currentRoute.value, async () => {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  onMounted(async () => {
 | 
	
		
			
				|  |  | -  menuData.value = await getUserMenu()
 | 
	
		
			
				|  |  |    await nextTick()
 | 
	
		
			
				|  |  | +  menuData.value = await getUserMenu()
 | 
	
		
			
				|  |  | +  barHeight.height = (floatingRef.value.clientHeight - logoRef.value.clientHeight - 36) + 'px'
 | 
	
		
			
				|  |  |    await sleep(500)
 | 
	
		
			
				|  |  |    smoothScrolling()
 | 
	
		
			
				|  |  |  })
 | 
	
	
		
			
				|  | @@ -157,8 +164,6 @@ onMounted(async () => {
 | 
	
		
			
				|  |  |    height: 100%;
 | 
	
		
			
				|  |  |    width: 100%;
 | 
	
		
			
				|  |  |    background-color: var(--el-menu-bg-color);
 | 
	
		
			
				|  |  | -  display: flex;
 | 
	
		
			
				|  |  | -  flex-direction: column;
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |    .el-menu {
 | 
	
		
			
				|  |  |      border-right: 0 !important;
 |