xto-fronted 0.3.4 → 0.3.6

package/src/components/Layout/Sidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMenuStore } from '@/stores/menu'
 import { useUserStore } from '@/stores/user'
@@ -7,19 +7,7 @@ import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
 import { Menu, MenuItem, SubMenu } from '@xto/navigation'
 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
-  }
-)
+import { Icon } from '@xto/base'
 
 const route = useRoute()
 const router = useRouter()
@@ -28,7 +16,6 @@ const userStore = useUserStore()
 const authStore = useAuthStore()
 const appStore = useAppStore()
 
-const searchKeyword = ref('')
 const isCollapsed = computed(() => appStore.isCollapsed)
 const activeMenu = computed(() => route.path)
 
@@ -37,63 +24,13 @@ const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
 const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
 const menuActiveTextColor = computed(() => '#409eff')
 
-// 扁平化菜单用于搜索
-const flattenMenus = (menus: MenuItemType[], parentTitle = ''): (MenuItemType & { parentTitle: string })[] => {
-  const result: (MenuItemType & { parentTitle: string })[] = []
-  menus.forEach(menu => {
-    if (menu.children && menu.children.length > 0) {
-      result.push(...flattenMenus(menu.children, menu.title))
-    } else {
-      result.push({ ...menu, parentTitle })
-    }
-  })
-  return result
-}
-
-// 搜索结果
-const searchResults = computed(() => {
-  if (!searchKeyword.value.trim()) return []
-  const flatMenus = flattenMenus(menuStore.menuList)
-  return flatMenus.filter(menu =>
-    menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
-  )
-})
-
-// 过滤后的菜单列表
-const filteredMenuList = computed(() => {
-  if (!searchKeyword.value.trim()) return menuStore.menuList
-
-  return menuStore.menuList.map(menu => {
-    if (menu.children && menu.children.length > 0) {
-      const filteredChildren = menu.children.filter(child =>
-        child.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
-      )
-      if (filteredChildren.length > 0) {
-        return { ...menu, children: filteredChildren }
-      }
-      return null
-    }
-    if (menu.title.toLowerCase().includes(searchKeyword.value.toLowerCase())) {
-      return menu
-    }
-    return null
-  }).filter(Boolean) as MenuItemType[]
-})
-
 // 菜单选择
 const handleMenuSelect = (index: string) => {
   if (index && index !== route.path) {
     router.push(index)
-    searchKeyword.value = ''
   }
 }
 
-// 搜索结果点击
-const handleSearchItemClick = (path: string) => {
-  router.push(path)
-  searchKeyword.value = ''
-}
-
 // 退出登录
 const handleLogout = () => {
   authStore.logout()
@@ -102,65 +39,33 @@ 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: '🔧'
-  }
-  return iconMap[icon || ''] || '📄'
+    dashboard: 'dashboard',
+    system: 'system',
+    user: 'user',
+    role: 'role',
+    menu: 'list',
+    setting: 'setting'
+  }
+  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">
-      <Input
-        v-model="searchKeyword"
-        placeholder="搜索菜单..."
-        size="small"
-        clearable
-      />
-      <!-- 搜索结果 -->
-      <div v-if="searchResults.length > 0" class="sidebar__search-results">
-        <div
-          v-for="item in searchResults"
-          :key="item.path"
-          class="sidebar__search-item"
-          @click="handleSearchItemClick(item.path)"
-        >
-          <span class="menu-icon">{{ getMenuIcon(item.icon) }}</span>
-          <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>
-          </div>
-        </div>
-      </div>
-    </div>
-
     <!-- 菜单 -->
     <Menu
       :default-active="activeMenu"
-      :mode="mode"
-      :collapse="isCollapsed && isVertical"
+      mode="vertical"
+      :collapse="isCollapsed"
       :collapse-transition="false"
       :background-color="menuBgColor"
       :text-color="menuTextColor"
@@ -168,11 +73,11 @@ const isHorizontal = computed(() => props.mode === 'horizontal')
       class="sidebar__menu"
       @select="handleMenuSelect"
     >
-      <template v-for="menu in filteredMenuList" :key="menu.path">
+      <template v-for="menu in menuStore.menuList" :key="menu.path">
         <!-- 有子菜单 -->
         <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 +85,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 +114,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;
@@ -255,55 +143,6 @@ const isHorizontal = computed(() => props.mode === 'horizontal')
     color: var(--color-primary);
   }
 
-  &__search {
-    padding: 10px;
-    border-bottom: 1px solid var(--color-border-lighter);
-    position: relative;
-  }
-
-  &__search-results {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background-color: var(--bg-color);
-    border: 1px solid var(--color-border-lighter);
-    border-radius: var(--border-radius-base);
-    box-shadow: var(--box-shadow);
-    max-height: 300px;
-    overflow-y: auto;
-    z-index: 100;
-  }
-
-  &__search-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 12px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--color-fill);
-    }
-
-    &-info {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-
-    &-title {
-      font-size: 14px;
-      color: var(--color-text-primary);
-    }
-
-    &-parent {
-      font-size: 12px;
-      color: var(--color-text-secondary);
-    }
-  }
-
   &__menu {
     flex: 1;
     border-right: none;
@@ -334,8 +173,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;