xto-fronted 0.3.4 → 0.3.5

package/src/components/Layout/Sidebar.vue

@@ -8,19 +8,9 @@ import { useAppStore } from '@/stores/app'
 import { Menu, MenuItem, SubMenu } from '@xto/navigation'
 import { Button } from '@xto/base'
 import { Input } from '@xto/form'
+import { Icon } from '@xto/base'
 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()
@@ -102,37 +92,30 @@ const handleLogout = () => {
   router.push('/login')
 }
 
-// 菜单图标
-const getMenuIcon = (icon?: string) => {
+// 获取菜单图标名称
+const getMenuIcon = (icon?: string): string => {
   const iconMap: Record<string, string> = {
-    dashboard: '📊',
-    system: '⚙️',
-    user: '👤',
-    role: '👥',
-    menu: '📋',
-    setting: '🔧'
+    dashboard: 'dashboard',
+    system: 'system',
+    user: 'user',
+    role: 'role',
+    menu: 'list',
+    setting: 'setting'
   }
-  return iconMap[icon || ''] || '📄'
+  return iconMap[icon || ''] || 'file'
 }
-
-const isVertical = computed(() => props.mode === 'vertical')
-const isHorizontal = computed(() => props.mode === 'horizontal')
 </script>
 
 <template>
-  <div class="sidebar" :class="[
-    `sidebar--${mode}`,
-    { 'sidebar--collapsed': isCollapsed && isVertical },
-    { 'sidebar--horizontal': isHorizontal }
-  ]">
-    <!-- Logo（仅垂直模式显示） -->
-    <div v-if="showLogo && isVertical" class="sidebar__logo">
+  <div class="sidebar" :class="{ 'sidebar--collapsed': isCollapsed }">
+    <!-- Logo -->
+    <div class="sidebar__logo">
       <img src="/vite.svg" alt="Logo" class="sidebar__logo-img" />
       <span v-show="!isCollapsed" class="sidebar__logo-text">{{ appStore.appName }}</span>
     </div>
 
-    <!-- 搜索框（仅垂直模式显示） -->
-    <div v-if="isVertical && !isCollapsed" class="sidebar__search">
+    <!-- 搜索框 -->
+    <div v-if="!isCollapsed" class="sidebar__search">
       <Input
         v-model="searchKeyword"
         placeholder="搜索菜单..."
@@ -147,7 +130,7 @@ const isHorizontal = computed(() => props.mode === 'horizontal')
           class="sidebar__search-item"
           @click="handleSearchItemClick(item.path)"
         >
-          <span class="menu-icon">{{ getMenuIcon(item.icon) }}</span>
+          <Icon :name="getMenuIcon(item.icon)" :size="16" />
           <div class="sidebar__search-item-info">
             <span class="sidebar__search-item-title">{{ item.title }}</span>
             <span v-if="item.parentTitle" class="sidebar__search-item-parent">{{ item.parentTitle }}</span>
@@ -159,8 +142,8 @@ const isHorizontal = computed(() => props.mode === 'horizontal')
     <!-- 菜单 -->
     <Menu
       :default-active="activeMenu"
-      :mode="mode"
-      :collapse="isCollapsed && isVertical"
+      mode="vertical"
+      :collapse="isCollapsed"
       :collapse-transition="false"
       :background-color="menuBgColor"
       :text-color="menuTextColor"
@@ -172,7 +155,7 @@ const isHorizontal = computed(() => props.mode === 'horizontal')
         <!-- 有子菜单 -->
         <SubMenu v-if="menu.children && menu.children.length > 0" :index="menu.path">
           <template #title>
-            <span class="menu-icon">{{ getMenuIcon(menu.icon) }}</span>
+            <Icon :name="getMenuIcon(menu.icon)" :size="16" />
             <span>{{ menu.title }}</span>
           </template>
           <MenuItem
@@ -180,20 +163,20 @@ const isHorizontal = computed(() => props.mode === 'horizontal')
             :key="child.path"
             :index="child.path"
           >
-            <span class="menu-icon">{{ getMenuIcon(child.icon) }}</span>
+            <Icon :name="getMenuIcon(child.icon)" :size="16" />
             <span>{{ child.title }}</span>
           </MenuItem>
         </SubMenu>
         <!-- 无子菜单 -->
         <MenuItem v-else :index="menu.path">
-          <span class="menu-icon">{{ getMenuIcon(menu.icon) }}</span>
+          <Icon :name="getMenuIcon(menu.icon)" :size="16" />
           <span>{{ menu.title }}</span>
         </MenuItem>
       </template>
     </Menu>
 
-    <!-- 用户信息（仅垂直模式显示） -->
-    <div v-if="isVertical && !isCollapsed" class="sidebar__user">
+    <!-- 用户信息 -->
+    <div v-if="!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>
@@ -209,26 +192,9 @@ const isHorizontal = computed(() => props.mode === 'horizontal')
   display: flex;
   flex-direction: column;
   background-color: var(--bg-color);
+  border-right: 1px solid var(--color-border-lighter);
 
-  // 垂直模式
-  &--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 {
+  &--collapsed {
     .sidebar__logo {
       justify-content: center;
       padding: 0;
@@ -334,8 +300,4 @@ const isHorizontal = computed(() => props.mode === 'horizontal')
     color: var(--color-text-secondary);
   }
 }
-
-.menu-icon {
-  margin-right: 8px;
-}
 </style>

package/src/components/Layout/index.vue

@@ -9,73 +9,21 @@ 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" :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>
+  <div class="layout">
+    <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>
-    </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>
   </div>
 </template>
 
@@ -85,126 +33,6 @@ const isMixMode = computed(() => layoutMode.value === 'mix')
   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;