xto-fronted 0.3.2 → 0.3.4

package/src/components/Layout/Sidebar.vue

@@ -10,6 +10,17 @@ import { Button } from '@xto/base'
 import { Input } from '@xto/form'
 import type { MenuItem as MenuItemType } from '@/types/api'
 
+const props = withDefaults(
+  defineProps<{
+    mode?: 'vertical' | 'horizontal'
+    showLogo?: boolean
+  }>(),
+  {
+    mode: 'vertical',
+    showLogo: true
+  }
+)
+
 const route = useRoute()
 const router = useRouter()
 const menuStore = useMenuStore()
@@ -103,18 +114,25 @@ const getMenuIcon = (icon?: string) => {
   }
   return iconMap[icon || ''] || '📄'
 }
+
+const isVertical = computed(() => props.mode === 'vertical')
+const isHorizontal = computed(() => props.mode === 'horizontal')
 </script>
 
 <template>
-  <div class="sidebar">
-    <!-- Logo -->
-    <div class="sidebar__logo">
+  <div class="sidebar" :class="[
+    `sidebar--${mode}`,
+    { 'sidebar--collapsed': isCollapsed && isVertical },
+    { 'sidebar--horizontal': isHorizontal }
+  ]">
+    <!-- Logo（仅垂直模式显示） -->
+    <div v-if="showLogo && isVertical" class="sidebar__logo">
       <img src="/vite.svg" alt="Logo" class="sidebar__logo-img" />
-      <span v-show="!isCollapsed" class="sidebar__logo-text">Xto Demo</span>
+      <span v-show="!isCollapsed" class="sidebar__logo-text">{{ appStore.appName }}</span>
     </div>
 
-    <!-- 搜索框 -->
-    <div v-if="!isCollapsed" class="sidebar__search">
+    <!-- 搜索框（仅垂直模式显示） -->
+    <div v-if="isVertical && !isCollapsed" class="sidebar__search">
       <Input
         v-model="searchKeyword"
         placeholder="搜索菜单..."
@@ -141,7 +159,8 @@ const getMenuIcon = (icon?: string) => {
     <!-- 菜单 -->
     <Menu
       :default-active="activeMenu"
-      :collapse="isCollapsed"
+      :mode="mode"
+      :collapse="isCollapsed && isVertical"
       :collapse-transition="false"
       :background-color="menuBgColor"
       :text-color="menuTextColor"
@@ -173,11 +192,11 @@ const getMenuIcon = (icon?: string) => {
       </template>
     </Menu>
 
-    <!-- 用户信息 -->
-    <div class="sidebar__user" v-if="!isCollapsed">
+    <!-- 用户信息（仅垂直模式显示） -->
+    <div v-if="isVertical && !isCollapsed" class="sidebar__user">
       <div class="sidebar__user-info">
         <span class="sidebar__user-name">{{ userStore.nickname }}</span>
-        <span class="sidebar__user-role">{{ userStore.roles.join(', ') }}</span>
+        <span class="sidebar__user-role">{{ userStore.roles?.join(', ') }}</span>
       </div>
       <Button type="text" size="small" @click="handleLogout">退出</Button>
     </div>
@@ -191,11 +210,36 @@ const getMenuIcon = (icon?: string) => {
   flex-direction: column;
   background-color: var(--bg-color);
 
+  // 垂直模式
+  &--vertical {
+    border-right: 1px solid var(--color-border-lighter);
+  }
+
+  // 水平模式
+  &--horizontal {
+    flex-direction: row;
+    border: none;
+    background-color: transparent;
+
+    .sidebar__menu {
+      border: none;
+      background-color: transparent;
+    }
+  }
+
+  // 折叠状态
+  &--collapsed.sidebar--vertical {
+    .sidebar__logo {
+      justify-content: center;
+      padding: 0;
+    }
+  }
+
   &__logo {
     height: 50px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    padding: 0 20px;
     gap: 10px;
     border-bottom: 1px solid var(--color-border-lighter);
   }

package/src/components/Layout/index.vue

@@ -9,19 +9,73 @@ const appStore = useAppStore()
 const sidebarWidth = computed(() =>
   appStore.isCollapsed ? '64px' : '210px'
 )
+
+const layoutMode = computed(() => appStore.layout)
+
+const isSidebarMode = computed(() => layoutMode.value === 'sidebar')
+const isTopMode = computed(() => layoutMode.value === 'top')
+const isMixMode = computed(() => layoutMode.value === 'mix')
 </script>
 
 <template>
-  <div class="layout">
-    <aside class="layout__aside" :style="{ width: sidebarWidth }">
-      <Sidebar />
-    </aside>
-    <div class="layout__main">
-      <Header class="layout__header" />
+  <div class="layout" :class="`layout--${layoutMode}`">
+    <!-- 顶部模式：顶部导航 + 内容 -->
+    <template v-if="isTopMode">
+      <header class="layout__header-top">
+        <div class="layout__header-logo">
+          <img src="/vite.svg" alt="Logo" class="layout__logo-img" />
+          <span class="layout__logo-text">{{ appStore.appName }}</span>
+        </div>
+        <Sidebar class="layout__top-menu" mode="horizontal" />
+        <div class="layout__header-right">
+          <Header :show-breadcrumb="false" :show-collapse="false" />
+        </div>
+      </header>
       <main class="layout__content">
         <router-view />
       </main>
-    </div>
+    </template>
+
+    <!-- 混合模式：顶部导航 + 左侧菜单 -->
+    <template v-else-if="isMixMode">
+      <header class="layout__header-mix">
+        <div class="layout__header-left">
+          <div class="layout__collapse" @click="appStore.toggleCollapse">
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+              <path v-if="appStore.isCollapsed" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+              <path v-else d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+            </svg>
+          </div>
+          <Sidebar class="layout__top-menu" mode="horizontal" />
+        </div>
+        <div class="layout__header-right">
+          <Header :show-breadcrumb="false" :show-collapse="false" />
+        </div>
+      </header>
+      <div class="layout__body">
+        <aside class="layout__aside" :style="{ width: sidebarWidth }">
+          <Sidebar mode="vertical" :show-logo="false" />
+        </aside>
+        <main class="layout__content">
+          <router-view />
+        </main>
+      </div>
+    </template>
+
+    <!-- 侧边栏模式：左侧菜单 + 顶部 -->
+    <template v-else-if="isSidebarMode">
+      <aside class="layout__aside" :style="{ width: sidebarWidth }">
+        <Sidebar />
+      </aside>
+      <div class="layout__main">
+        <header class="layout__header">
+          <Header />
+        </header>
+        <main class="layout__content">
+          <router-view />
+        </main>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -31,6 +85,126 @@ const sidebarWidth = computed(() =>
   width: 100%;
   height: 100%;
 
+  // 侧边栏模式
+  &--sidebar {
+    flex-direction: row;
+  }
+
+  // 顶部模式
+  &--top {
+    flex-direction: column;
+
+    .layout__header-top {
+      height: 50px;
+      background-color: var(--bg-color);
+      border-bottom: 1px solid var(--color-border-lighter);
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      gap: 20px;
+    }
+
+    .layout__header-logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .layout__logo-img {
+      width: 32px;
+      height: 32px;
+    }
+
+    .layout__logo-text {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-primary);
+    }
+
+    .layout__top-menu {
+      flex: 1;
+      border: none;
+    }
+
+    .layout__header-right {
+      display: flex;
+      align-items: center;
+    }
+
+    .layout__content {
+      flex: 1;
+      overflow: auto;
+      background-color: var(--bg-color-page);
+    }
+  }
+
+  // 混合模式
+  &--mix {
+    flex-direction: column;
+
+    .layout__header-mix {
+      height: 50px;
+      background-color: var(--bg-color);
+      border-bottom: 1px solid var(--color-border-lighter);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+    }
+
+    .layout__header-left {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+    }
+
+    .layout__collapse {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: var(--color-text-regular);
+      transition: color 0.2s;
+
+      &:hover {
+        color: var(--color-primary);
+      }
+    }
+
+    .layout__top-menu {
+      border: none;
+    }
+
+    .layout__header-right {
+      display: flex;
+      align-items: center;
+    }
+
+    .layout__body {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+    }
+
+    .layout__aside {
+      transition: width 0.3s;
+      overflow: hidden;
+      flex-shrink: 0;
+      height: 100%;
+      background-color: var(--bg-color);
+      border-right: 1px solid var(--color-border-lighter);
+    }
+
+    .layout__content {
+      flex: 1;
+      overflow: auto;
+      background-color: var(--bg-color-page);
+    }
+  }
+
+  // 通用样式
   &__aside {
     transition: width 0.3s;
     overflow: hidden;