xto-fronted 0.4.64 → 0.4.66

package/src/components/Layout/Sidebar.vue

@@ -5,8 +5,9 @@ import { useMenuStore } from '@/stores/menu'
 import { useUserStore } from '@/stores/user'
 import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
-import { Menu, MenuItem, SubMenu } from '@xto/navigation'
-import { Button, Icon } from '@xto/base'
+import { Menu } from '@xto/navigation'
+import { Button } from '@xto/base'
+import SidebarMenuItem from './SidebarMenuItem.vue'
 
 // Props
 const props = withDefaults(defineProps<{
@@ -51,87 +52,6 @@ const handleLogout = () => {
   menuStore.clearMenu()
   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 || icon === '') return ''
-
-  // 处理 tineco-ui 的图标类名（如 tineco-icon-home）
-  if (icon.startsWith('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',
-    user: 'user',
-    role: 'role',
-    menu: 'list',
-    setting: 'setting',
-    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>
@@ -155,41 +75,7 @@ const iconExists = (iconName: string): boolean => {
       @select="handleMenuSelect"
     >
       <template v-for="menu in displayMenuList" :key="menu.menuUrl">
-        <!-- 有子菜单 -->
-        <SubMenu v-if="menu.children && menu.children.length > 0" :index="menu.menuUrl">
-          <template #title>
-            <span class="sidebar__menu-content">
-              <span v-if="menu.menuName !== '首页'" 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 class="sidebar__menu-text">{{ menu.menuName }}</span>
-            </span>
-          </template>
-          <MenuItem
-            v-for="child in menu.children"
-            :key="child.menuUrl"
-            :index="child.menuUrl"
-          >
-            <span class="sidebar__menu-content">
-              <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 class="sidebar__menu-text">{{ child.menuName }}</span>
-            </span>
-          </MenuItem>
-        </SubMenu>
-        <!-- 无子菜单 -->
-        <MenuItem v-else :index="menu.menuUrl">
-          <span class="sidebar__menu-content">
-            <span v-if="menu.menuName !== '首页'" 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 class="sidebar__menu-text">{{ menu.menuName }}</span>
-          </span>
-        </MenuItem>
+        <SidebarMenuItem :menu="menu" />
       </template>
     </Menu>
 
@@ -245,40 +131,6 @@ const iconExists = (iconName: string): boolean => {
     overflow-y: auto;
   }
 
-  &__menu-content {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-  }
-
-  &__menu-text {
-    flex: 1;
-    line-height: 1;
-  }
-
-  &__menu-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    margin-right: 8px;
-    flex-shrink: 0;
-  }
-
-  &__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/components/Layout/SidebarMenuItem.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { MenuItem, SubMenu } from '@xto/navigation'
+import { Icon } from '@xto/base'
+
+// Props
+const props = defineProps<{
+  menu: any
+}>()
+
+// 已知的图标名称列表
+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 || icon === '') return ''
+
+  if (icon.startsWith('tineco-icon-')) {
+    const iconName = icon.replace('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',
+    user: 'user',
+    role: 'role',
+    menu: 'list',
+    setting: 'setting',
+    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)
+}
+
+// 是否有子菜单
+const hasChildren = computed(() => {
+  return props.menu.children && props.menu.children.length > 0
+})
+</script>
+
+<template>
+  <!-- 有子菜单 -->
+  <SubMenu v-if="hasChildren" :index="menu.menuUrl">
+    <template #title>
+      <span class="menu-item__content">
+        <span class="menu-item__icon">
+          <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+          <span v-else class="menu-item__char">{{ getFirstChar(menu.menuName) }}</span>
+        </span>
+        <span class="menu-item__text">{{ menu.menuName }}</span>
+      </span>
+    </template>
+    <!-- 递归渲染子菜单 -->
+    <template v-for="child in menu.children" :key="child.menuUrl">
+      <SidebarMenuItem :menu="child" />
+    </template>
+  </SubMenu>
+
+  <!-- 无子菜单 -->
+  <MenuItem v-else :index="menu.menuUrl">
+    <span class="menu-item__content">
+      <span v-if="menu.menuName !== '首页'" class="menu-item__icon">
+        <Icon v-if="iconExists(getMenuIcon(menu.icon))" :name="getMenuIcon(menu.icon)" :size="16" />
+        <span v-else class="menu-item__char">{{ getFirstChar(menu.menuName) }}</span>
+      </span>
+      <span class="menu-item__text">{{ menu.menuName }}</span>
+    </span>
+  </MenuItem>
+</template>
+
+<style lang="scss" scoped>
+.menu-item__content {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.menu-item__text {
+  flex: 1;
+  line-height: 1;
+}
+
+.menu-item__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.menu-item__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;
+}
+</style>

package/src/style.scss

@@ -1,14 +1,14 @@
-/**
- * xto-fronted 样式入口
- * 组件样式已包含在各自的 Vue 组件中（scoped）
- */
-
-/* 导入全局样式（包含灰色模式、暗黑模式等） */
-@import './assets/styles/index.scss';
-
-/* 全局样式变量（可选） */
-:root {
-  --bg-color: #ffffff;
-  --bg-color-page: #f5f7fa;
-  --color-border-lighter: #e4e7ed;
+/**
+ * xto-fronted 样式入口
+ * 组件样式已包含在各自的 Vue 组件中（scoped）
+ */
+
+/* 导入全局样式（包含灰色模式、暗黑模式等） */
+@import './assets/styles/index.scss';
+
+/* 全局样式变量（可选） */
+:root {
+  --bg-color: #ffffff;
+  --bg-color-page: #f5f7fa;
+  --color-border-lighter: #e4e7ed;
 }

package/src/views/error/403.vue

@@ -1,57 +1,57 @@
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { Button } from '@xto/base'
-
-const router = useRouter()
-
-const goBack = () => {
-  router.push('/')
-}
-</script>
-
-<template>
-  <div class="error-page">
-    <div class="error-page__content">
-      <div class="error-page__code">403</div>
-      <div class="error-page__title">无访问权限</div>
-      <div class="error-page__desc">抱歉，您没有权限访问此页面</div>
-      <Button type="primary" @click="goBack">返回首页</Button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.error-page {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--bg-color-page);
-
-  &__content {
-    text-align: center;
-  }
-
-  &__code {
-    font-size: 120px;
-    font-weight: 600;
-    color: var(--color-warning);
-    line-height: 1;
-    margin-bottom: 20px;
-  }
-
-  &__title {
-    font-size: 24px;
-    font-weight: 500;
-    color: var(--color-text-primary);
-    margin-bottom: 10px;
-  }
-
-  &__desc {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-    margin-bottom: 30px;
-  }
-}
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { Button } from '@xto/base'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="error-page">
+    <div class="error-page__content">
+      <div class="error-page__code">403</div>
+      <div class="error-page__title">无访问权限</div>
+      <div class="error-page__desc">抱歉，您没有权限访问此页面</div>
+      <Button type="primary" @click="goBack">返回首页</Button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.error-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-color-page);
+
+  &__content {
+    text-align: center;
+  }
+
+  &__code {
+    font-size: 120px;
+    font-weight: 600;
+    color: var(--color-warning);
+    line-height: 1;
+    margin-bottom: 20px;
+  }
+
+  &__title {
+    font-size: 24px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    margin-bottom: 10px;
+  }
+
+  &__desc {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    margin-bottom: 30px;
+  }
+}
 </style>

package/src/views/error/404.vue

@@ -1,57 +1,57 @@
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-import { Button } from '@xto/base'
-
-const router = useRouter()
-
-const goBack = () => {
-  router.push('/')
-}
-</script>
-
-<template>
-  <div class="error-page">
-    <div class="error-page__content">
-      <div class="error-page__code">404</div>
-      <div class="error-page__title">页面不存在</div>
-      <div class="error-page__desc">抱歉，您访问的页面不存在或已被删除</div>
-      <Button type="primary" @click="goBack">返回首页</Button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.error-page {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--bg-color-page);
-
-  &__content {
-    text-align: center;
-  }
-
-  &__code {
-    font-size: 120px;
-    font-weight: 600;
-    color: var(--color-primary);
-    line-height: 1;
-    margin-bottom: 20px;
-  }
-
-  &__title {
-    font-size: 24px;
-    font-weight: 500;
-    color: var(--color-text-primary);
-    margin-bottom: 10px;
-  }
-
-  &__desc {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-    margin-bottom: 30px;
-  }
-}
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { Button } from '@xto/base'
+
+const router = useRouter()
+
+const goBack = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="error-page">
+    <div class="error-page__content">
+      <div class="error-page__code">404</div>
+      <div class="error-page__title">页面不存在</div>
+      <div class="error-page__desc">抱歉，您访问的页面不存在或已被删除</div>
+      <Button type="primary" @click="goBack">返回首页</Button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.error-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-color-page);
+
+  &__content {
+    text-align: center;
+  }
+
+  &__code {
+    font-size: 120px;
+    font-weight: 600;
+    color: var(--color-primary);
+    line-height: 1;
+    margin-bottom: 20px;
+  }
+
+  &__title {
+    font-size: 24px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    margin-bottom: 10px;
+  }
+
+  &__desc {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+    margin-bottom: 30px;
+  }
+}
 </style>