feat: 顶部菜单

web/src/components/aside-box.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="aside_container">
-    <div class="logo_wrap">
+    <div class="logo_wrap" @click="toggleMenuPosition">
       <img src="/logo_v2_01.png" alt="logo">
       <Transition name="el-fade-in-linear">
         <h1 v-show="!menuCollapse">EasyNode</h1>
@@ -42,7 +42,12 @@ const isDark = computed({
 })
 
 const handleCollapse = () => {
-  $store.setMenuCollapse(!menuCollapse.value)
+  $store.setMenuCollapse()
+}
+
+const toggleMenuPosition = () => {
+  const newPosition = 'top' // 从左侧模式切换到顶部模式
+  $store.setMenuPosition(newPosition)
 }
 </script>
 
@@ -60,21 +65,21 @@ const handleCollapse = () => {
     display: flex;
     align-items: center;
     padding: 15px 0 15px 20px;
-    position: relative;
+    cursor: pointer;
+
     img {
       height: 30px;
       width: 30px;
     }
+
     h1 {
-      position: absolute;
-      left: 52px;
       font-size: 14px;
-      // color: var(--el-menu-active-color);
-      // color: #ffc021;
       background: linear-gradient(to right, #ffc021, #e4d1a1);
+      background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       font-weight: 600;
+      user-select: none;
     }
   }
   .aside_footer {

web/src/components/menuList.vue

@@ -2,7 +2,9 @@
   <el-menu
     :default-active="defaultActiveMenu"
     :collapse="menuCollapse"
+    :mode="mode"
     class="menu"
+    :class="{ 'horizontal_menu': mode === 'horizontal' }"
     :collapse-transition="true"
     @select="handleSelect"
   >
@@ -29,6 +31,14 @@ import {
   Pointer
   // FolderOpened
 } from '@element-plus/icons-vue'
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'vertical'
+  }
+})
+
 const { proxy: { $router, $store } } = getCurrentInstance()
 
 const emit = defineEmits(['select',])
@@ -73,7 +83,7 @@ const list = reactive([
   },
 ])
 
-const menuCollapse = computed(() => $store.menuCollapse)
+const menuCollapse = computed(() => props.mode === 'horizontal' ? false : $store.menuCollapse)
 
 // eslint-disable-next-line no-useless-escape
 const regex = /^\/([^\/]+)/
@@ -93,4 +103,14 @@ const handleSelect = (path) => {
   $router.push(path)
   emit('select', path)
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+.horizontal_menu {
+  :deep(.el-menu-item) {
+    .el-icon {
+      margin-right: 8px;
+    }
+  }
+}
+</style>

web/src/components/top-bar.vue

@@ -6,7 +6,22 @@
           <Fold />
         </el-icon>
       </div>
-      <h2>{{ title }}</h2>
+
+      <!-- 左侧菜单模式：显示标题 -->
+      <h2 v-if="menuPosition === 'left'">{{ title }}</h2>
+
+      <!-- 顶部菜单模式：显示logo和菜单 -->
+      <div v-if="menuPosition === 'top' && !isMobileScreen" class="top_logo_wrap" @click="toggleMenuPosition">
+        <img src="/logo_v2_01.png" alt="logo">
+        <h1>EasyNode</h1>
+      </div>
+
+      <MenuList
+        v-if="menuPosition === 'top' && !isMobileScreen"
+        mode="horizontal"
+        class="top_menu_list"
+        @select="() => {}"
+      />
 
       <AiButton />
 
@@ -117,6 +132,7 @@ import { User, Fold, Document } from '@element-plus/icons-vue'
 import packageJson from '../../package.json'
 import MenuList from './menuList.vue'
 import AiButton from './ai-chat/ai-button.vue'
+import useMobileWidth from '@/composables/useMobileWidth'
 
 const { proxy: { $router, $store, $api, $message } } = getCurrentInstance()
 const router = useRouter()
@@ -128,10 +144,13 @@ const features = ref([])
 const menuCollapse = ref(false)
 const discount = ref(false)
 
+const { isMobileScreen } = useMobileWidth()
+
 const isNew = computed(() => latestVersion.value && latestVersion.value !== currentVersion.value)
 const user = computed(() => $store.user)
 const title = computed(() => $store.title)
 const isPlusActive = computed(() => $store.isPlusActive)
+const menuPosition = computed(() => $store.menuPosition)
 
 const handleCollapse = () => {
   menuCollapse.value = !menuCollapse.value
@@ -147,6 +166,11 @@ const gotoPlusPage = () => {
   router.push('/setting?tabKey=plus')
 }
 
+const toggleMenuPosition = () => {
+  const newPosition = menuPosition.value === 'top' ? 'left' : 'top'
+  $store.setMenuPosition(newPosition)
+}
+
 async function checkLatestVersionByGitRelease() {
   const timeout = 5000
   try {
@@ -267,6 +291,53 @@ onBeforeUnmount(() => {
       margin-right: auto;
     }
 
+    .top_logo_wrap {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      img {
+        height: 30px;
+        width: 30px;
+      }
+
+      h1 {
+        font-size: 14px;
+        background: linear-gradient(to right, #ffc021, #e4d1a1);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-weight: 600;
+        user-select: none;
+      }
+    }
+
+    .top_menu_list {
+      flex: 1;
+      margin: 0 20px;
+      border-bottom: none;
+
+      :deep(.el-menu) {
+        border-bottom: none;
+        background-color: transparent;
+
+        .el-menu-item {
+          padding: 0 16px;
+          border-bottom: none;
+
+          &.is-active {
+            background-color: rgba(64, 158, 255, 0.1);
+            border-radius: 4px;
+          }
+
+          &:hover {
+            background-color: rgba(64, 158, 255, 0.05);
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+
     .about_btn {
       margin-left: 15px;
       margin-right: 15px;

web/src/store/index.js

@@ -17,6 +17,7 @@ const useStore = defineStore('global', {
     token: localStorage.getItem('token') || sessionStorage.getItem('token') || null,
     title: '',
     isDark: false,
+    menuPosition: localStorage.getItem('menuPosition') || 'left', // left | top
     menuCollapse: localStorage.getItem('menuCollapse') === 'true',
     defaultBackgroundImages: [
       'linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%)',
@@ -202,10 +203,16 @@ const useStore = defineStore('global', {
       }
       this.setTheme(isDark, false)
     },
-    setMenuCollapse() {
-      let newState = !this.menuCollapse
+    setMenuCollapse(newState = null) {
+      if (newState === null) {
+        newState = !this.menuCollapse
+      }
       localStorage.setItem('menuCollapse', newState)
       this.$patch({ menuCollapse: newState })
+    },
+    setMenuPosition(position) {
+      localStorage.setItem('menuPosition', position)
+      this.$patch({ menuPosition: position })
     }
   }
 })

web/src/views/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="view_container">
-    <AsideBox />
+  <div class="view_container" :class="{ 'top_menu': menuPosition === 'top' }">
+    <AsideBox v-if="menuPosition === 'left'" />
     <div class="main_container">
       <TopBar />
       <router-view
@@ -18,12 +18,13 @@
 </template>
 
 <script setup>
-import { ref, onBeforeMount, getCurrentInstance } from 'vue'
+import { ref, onBeforeMount, getCurrentInstance, computed } from 'vue'
 import AsideBox from '@/components/aside-box.vue'
 import TopBar from '@/components/top-bar.vue'
 
 const { proxy: { $store, $route } } = getCurrentInstance()
 const loading = ref(true)
+const menuPosition = computed(() => $store.menuPosition)
 
 const getMainData = async () => {
   try {
@@ -44,6 +45,16 @@ onBeforeMount(async () => {
 .view_container {
   display: flex;
   height: 100vh;
+
+  &.top_menu {
+    flex-direction: column;
+
+    .main_container {
+      flex: 1;
+      width: 100%;
+    }
+  }
+
   .main_container {
     flex: 1;
     height: 100%;

web/src/views/terminal/components/terminal.vue

@@ -87,13 +87,14 @@ const hostObj = computed(() => props.hostObj)
 const hostId = computed(() => hostObj.value.id)
 const host = computed(() => hostObj.value.host)
 const menuCollapse = computed(() => $store.menuCollapse)
+const menuPosition = computed(() => $store.menuPosition)
 const autoExecuteScript = computed(() => $store.terminalConfig.autoExecuteScript)
 const autoReconnect = computed(() => $store.terminalConfig.autoReconnect)
 const isPlusActive = computed(() => $store.isPlusActive)
 const isLongPressCtrl = computed(() => props.longPressCtrl)
 const isLongPressAlt = computed(() => props.longPressAlt)
 
-watch(menuCollapse, () => {
+watch([menuCollapse, menuPosition,], () => {
   nextTick(() => {
     handleResize()
   })