refactor(layout): 重构基础布局头部组件结构

src/layouts/base-layout/base-layout-header/components/ToggleSiderButton.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const buttonRef = useTemplateRef('buttonRef');
+const appStore = useAppStore();
+
+function toggleCollapsed() {
+  // https://github.com/tusen-ai/naive-ui/issues/3688
+  // hover style 鼠标移出就会消失 如果是点击 button 会聚焦需要失去焦点才会恢复
+  buttonRef.value?.$el.blur();
+  appStore.toggleSidebar();
+}
+</script>
+
+<template>
+  <NTooltip :disabled="appStore.isMobile" placement="bottom-start">
+    {{ appStore.sidebarCollapsed ? '展开菜单' : '收起菜单' }}
+    <template #trigger>
+      <NButton ref="buttonRef" quaternary @click="toggleCollapsed">
+        <icon-line-md:menu-fold-right v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 />
+        <icon-line-md:menu-fold-left v-else w-4.5 h-4.5 />
+      </NButton>
+    </template>
+  </NTooltip>
+</template>