xto-fronted 0.4.5 → 0.4.7

package/src/components/Layout/Sidebar.vue

@@ -6,8 +6,7 @@ import { useUserStore } from '@/stores/user'
 import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
 import { Menu, MenuItem, SubMenu } from '@xto/navigation'
-import { Button } from '@xto/base'
-import { Icon } from '@xto/base'
+import { Button, Icon } from '@xto/base'
 
 const route = useRoute()
 const router = useRouter()
@@ -39,13 +38,54 @@ const handleLogout = () => {
   router.push('/login')
 }
 
+// 已知的图标名称列表（来自 @xto/base/icons.ts）
+const knownIcons = new Set([
+  'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right',
+  'caret-down', 'caret-right', 'plus', 'minus', 'close', 'check',
+  'edit', 'delete', 'copy', 'download', 'upload', 'refresh', 'search',
+  'filter', 'more', 'setting', 'share', 'loading', 'info', 'success',
+  'warning', 'error', 'question', 'user', 'user-add', 'user-group',
+  'logout', 'login', 'file', 'folder', 'folder-open', 'document',
+  'image', 'video', 'music', 'camera', 'mail', 'phone', 'chat',
+  'bell', 'message', 'eye', 'eye-off', 'calendar', 'clock', 'history',
+  'timer', 'location', 'map', 'globe', 'star', 'heart', 'thumb-up',
+  'link', 'external-link', 'lock', 'unlock', 'key', 'home', 'menu',
+  'menu-fold', 'menu-unfold', 'sidebar-fold', 'sidebar-expand',
+  'sidebar-left', 'dashboard', 'chart', 'chart-pie', 'chart-line',
+  'report', 'analytics', 'system', 'permission', 'role', 'user-manage',
+  'log', 'notification', 'app', 'list', 'grid', 'fullscreen',
+  'fullscreen-exit', 'zoom-in', 'zoom-out', 'print', 'bookmark',
+  'tag', 'code', 'terminal', 'database', 'server', 'cloud', 'gift',
+  'moon', 'sun', 'theme', 'skin'
+])
+
 // 获取菜单图标名称
 const getMenuIcon = (icon?: string): string => {
-  if (!icon) return 'file'
+  // 无图标时返回空
+  if (!icon || icon === '') return ''
+
   // 处理 tineco-ui 的图标类名（如 tineco-icon-home）
   if (icon.startsWith('tineco-icon-')) {
-    return icon.replace('tineco-icon-', '')
+    const iconName = icon.replace('tineco-icon-', '')
+    // 常见的 tineco icon 映射
+    const tinecoIconMap: Record<string, string> = {
+      home: 'home',
+      dashboard: 'dashboard',
+      system: 'system',
+      user: 'user',
+      role: 'role',
+      menu: 'list',
+      setting: 'setting',
+      file: 'file',
+      folder: 'folder',
+      chart: 'chart',
+      report: 'report',
+      analytics: 'analytics'
+    }
+    return tinecoIconMap[iconName] || iconName
   }
+
+  // 常见业务图标映射
   const iconMap: Record<string, string> = {
     dashboard: 'dashboard',
     system: 'system',
@@ -53,10 +93,31 @@ const getMenuIcon = (icon?: string): string => {
     role: 'role',
     menu: 'list',
     setting: 'setting',
-    home: 'home'
+    home: 'home',
+    chart: 'chart',
+    report: 'report',
+    analytics: 'analytics',
+    permission: 'permission',
+    log: 'log',
+    notification: 'notification',
+    app: 'app',
+    list: 'list',
+    grid: 'grid'
   }
+
   return iconMap[icon] || icon
 }
+
+// 获取菜单名称第一个字
+const getFirstChar = (name?: string): string => {
+  if (!name) return ''
+  return name.charAt(0)
+}
+
+// 判断图标是否存在
+const iconExists = (iconName: string): boolean => {
+  return knownIcons.has(iconName)
+}
 </script>
 
 <template>
@@ -83,7 +144,10 @@ const getMenuIcon = (icon?: string): string => {
         <!-- 有子菜单 -->
         <SubMenu v-if="menu.children && menu.children.length > 0" :index="menu.menuUrl">
           <template #title>
-            <Icon :name="getMenuIcon(menu.icon)" :size="16" />
+            <span class="sidebar__menu-icon">
+              <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+              <span v-else class="sidebar__menu-char">{{ getFirstChar(menu.menuName) }}</span>
+            </span>
             <span>{{ menu.menuName }}</span>
           </template>
           <MenuItem
@@ -91,13 +155,19 @@ const getMenuIcon = (icon?: string): string => {
             :key="child.menuUrl"
             :index="child.menuUrl"
           >
-            <Icon :name="getMenuIcon(child.icon)" :size="16" />
+            <span class="sidebar__menu-icon">
+              <Icon v-if="iconExists(getMenuIcon(child.icon))" :name="getMenuIcon(child.icon)" :size="16" />
+              <span v-else class="sidebar__menu-char">{{ getFirstChar(child.menuName) }}</span>
+            </span>
             <span>{{ child.menuName }}</span>
           </MenuItem>
         </SubMenu>
         <!-- 无子菜单 -->
         <MenuItem v-else :index="menu.menuUrl">
-          <Icon :name="getMenuIcon(menu.icon)" :size="16" />
+          <span class="sidebar__menu-icon">
+            <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+            <span v-else class="sidebar__menu-char">{{ getFirstChar(menu.menuName) }}</span>
+          </span>
           <span>{{ menu.menuName }}</span>
         </MenuItem>
       </template>
@@ -155,6 +225,28 @@ const getMenuIcon = (icon?: string): string => {
     overflow-y: auto;
   }
 
+  &__menu-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+  }
+
+  &__menu-char {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-primary);
+    background-color: var(--color-primary-light-8);
+    border-radius: 4px;
+  }
+
   &__user {
     padding: 10px;
     border-top: 1px solid var(--color-border-lighter);

package/src/views/login/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { Button } from '@xto/base'
+import { Button, Icon } from '@xto/base'
 import { Form, FormItem, Input, Checkbox } from '@xto/form'
 import { Message } from '@xto/feedback'
 import { login } from '@/api/auth'
@@ -84,9 +84,12 @@ const handleLogin = async () => {
           <Input
             v-model="formData.uid"
             placeholder="用户名"
-            prefix-icon="👤"
             size="large"
-          />
+          >
+            <template #prefix>
+              <Icon name="user" :size="18" />
+            </template>
+          </Input>
         </FormItem>
 
         <FormItem prop="password">
@@ -94,11 +97,14 @@ const handleLogin = async () => {
             v-model="formData.password"
             type="password"
             placeholder="密码"
-            prefix-icon="🔒"
             size="large"
             show-password
             @keyup.enter="handleLogin"
-          />
+          >
+            <template #prefix>
+              <Icon name="lock" :size="18" />
+            </template>
+          </Input>
         </FormItem>
 
         <FormItem>