xto-fronted 0.3.3 → 0.3.5

package/src/components/Layout/Sidebar.vue

@@ -8,6 +8,7 @@ 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 route = useRoute()
@@ -91,26 +92,26 @@ 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'
 }
 </script>
 
 <template>
-  <div class="sidebar">
+  <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">Xto Demo</span>
+      <span v-show="!isCollapsed" class="sidebar__logo-text">{{ appStore.appName }}</span>
     </div>
 
     <!-- 搜索框 -->
@@ -129,7 +130,7 @@ const getMenuIcon = (icon?: string) => {
           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>
@@ -141,6 +142,7 @@ const getMenuIcon = (icon?: string) => {
     <!-- 菜单 -->
     <Menu
       :default-active="activeMenu"
+      mode="vertical"
       :collapse="isCollapsed"
       :collapse-transition="false"
       :background-color="menuBgColor"
@@ -153,7 +155,7 @@ const getMenuIcon = (icon?: string) => {
         <!-- 有子菜单 -->
         <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
@@ -161,23 +163,23 @@ const getMenuIcon = (icon?: string) => {
             :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 class="sidebar__user" v-if="!isCollapsed">
+    <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>
+        <span class="sidebar__user-role">{{ userStore.roles?.join(', ') }}</span>
       </div>
       <Button type="text" size="small" @click="handleLogout">退出</Button>
     </div>
@@ -190,12 +192,20 @@ const getMenuIcon = (icon?: string) => {
   display: flex;
   flex-direction: column;
   background-color: var(--bg-color);
+  border-right: 1px solid var(--color-border-lighter);
+
+  &--collapsed {
+    .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);
   }
@@ -290,8 +300,4 @@ const getMenuIcon = (icon?: string) => {
     color: var(--color-text-secondary);
   }
 }
-
-.menu-icon {
-  margin-right: 8px;
-}
 </style>

package/src/components/Layout/index.vue

@@ -17,7 +17,9 @@ const sidebarWidth = computed(() =>
       <Sidebar />
     </aside>
     <div class="layout__main">
-      <Header class="layout__header" />
+      <header class="layout__header">
+        <Header />
+      </header>
       <main class="layout__content">
         <router-view />
       </main>