xto-fronted 0.2.5 → 0.2.7

package/src/components/Layout/Header.vue

@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAppStore } from '@/stores/app'
+import { useUserStore } from '@/stores/user'
+import { useAuthStore } from '@/stores/auth'
+import { useMenuStore } from '@/stores/menu'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+const userStore = useUserStore()
+const authStore = useAuthStore()
+const menuStore = useMenuStore()
+
+const isCollapsed = computed(() => appStore.isCollapsed)
+const dropdownVisible = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
+const isFullscreen = ref(false)
+
+// 面包屑
+const breadcrumbs = computed(() => {
+  const matched = route.matched.filter(item => item.meta && item.meta.title)
+  return matched.map(item => ({
+    title: item.meta.title as string,
+    path: item.path
+  }))
+})
+
+// 切换折叠
+const toggleCollapse = () => {
+  appStore.toggleCollapse()
+}
+
+// 切换主题
+const toggleTheme = () => {
+  appStore.toggleTheme()
+}
+
+// 切换全屏
+const toggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen()
+  } else {
+    document.exitFullscreen()
+  }
+}
+
+// 监听全屏变化
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement
+}
+
+// 切换下拉菜单
+const toggleDropdown = () => {
+  dropdownVisible.value = !dropdownVisible.value
+}
+
+// 关闭下拉菜单
+const closeDropdown = () => {
+  dropdownVisible.value = false
+}
+
+// 个人信息
+const handleProfile = () => {
+  closeDropdown()
+  // TODO: 跳转到个人信息页面
+  alert('个人信息功能开发中...')
+}
+
+// 修改密码
+const handleChangePassword = () => {
+  closeDropdown()
+  // TODO: 打开修改密码弹窗
+  alert('修改密码功能开发中...')
+}
+
+// 退出登录
+const handleLogout = () => {
+  closeDropdown()
+  authStore.logout()
+  userStore.clearUserInfo()
+  menuStore.clearMenu()
+  router.push('/login')
+}
+
+// 点击外部关闭下拉菜单
+const handleClickOutside = (event: MouseEvent) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    closeDropdown()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+})
+</script>
+
+<template>
+  <div class="header">
+    <!-- 左侧 -->
+    <div class="header__left">
+      <div class="header__collapse" @click="toggleCollapse">
+        <span v-if="isCollapsed">☰</span>
+        <span v-else>☰</span>
+      </div>
+      <div class="header__breadcrumb">
+        <span v-for="(item, index) in breadcrumbs" :key="item.path">
+          <span v-if="index > 0"> / </span>
+          <span :class="{ 'is-current': index === breadcrumbs.length - 1 }">
+            {{ item.title }}
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <!-- 右侧 -->
+    <div class="header__right">
+      <!-- 全屏切换 -->
+      <div class="header__action" @click="toggleFullscreen" :title="isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'">
+        <svg v-if="isFullscreen" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+          <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
+        </svg>
+        <svg v-else viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+          <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
+        </svg>
+      </div>
+
+      <!-- 主题切换 -->
+      <div class="header__action" @click="toggleTheme" title="切换主题">
+        <span v-if="appStore.isDark">🌙</span>
+        <span v-else>☀️</span>
+      </div>
+
+      <!-- 用户头像 -->
+      <div class="header__user" ref="dropdownRef">
+        <div class="header__user-trigger" @click.stop="toggleDropdown">
+          <div class="header__avatar">
+            <span>{{ userStore.nickname?.charAt(0) || 'U' }}</span>
+          </div>
+          <span class="header__user-name">{{ userStore.nickname }}</span>
+          <span class="header__user-arrow" :class="{ 'is-active': dropdownVisible }">▼</span>
+        </div>
+
+        <!-- 下拉菜单 -->
+        <Transition name="dropdown">
+          <div v-if="dropdownVisible" class="header__dropdown">
+            <div class="header__dropdown-header">
+              <div class="header__dropdown-avatar">
+                <span>{{ userStore.nickname?.charAt(0) || 'U' }}</span>
+              </div>
+              <div class="header__dropdown-info">
+                <div class="header__dropdown-name">{{ userStore.nickname }}</div>
+                <div class="header__dropdown-role">{{ userStore.roles.join(', ') }}</div>
+              </div>
+            </div>
+            <div class="header__dropdown-divider"></div>
+            <div class="header__dropdown-menu">
+              <div class="header__dropdown-item" @click="handleProfile">
+                <span class="header__dropdown-icon">👤</span>
+                <span>个人信息</span>
+              </div>
+              <div class="header__dropdown-item" @click="handleChangePassword">
+                <span class="header__dropdown-icon">🔐</span>
+                <span>修改密码</span>
+              </div>
+              <div class="header__dropdown-divider"></div>
+              <div class="header__dropdown-item header__dropdown-item--danger" @click="handleLogout">
+                <span class="header__dropdown-icon">🚪</span>
+                <span>退出登录</span>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  height: 100%;
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+  &__collapse {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 18px;
+    color: var(--color-text-regular);
+
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+
+  &__breadcrumb {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+
+    .is-current {
+      color: var(--color-text-primary);
+      font-weight: 500;
+    }
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+  &__action {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: var(--border-radius-base);
+    font-size: 16px;
+
+    &:hover {
+      background-color: var(--color-fill);
+    }
+  }
+
+  &__user {
+    position: relative;
+
+    &-trigger {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: var(--border-radius-base);
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: var(--color-fill);
+      }
+    }
+
+    &-name {
+      font-size: 14px;
+      color: var(--color-text-primary);
+    }
+
+    &-arrow {
+      font-size: 10px;
+      color: var(--color-text-secondary);
+      transition: transform 0.2s;
+
+      &.is-active {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &__avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__dropdown {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    min-width: 200px;
+    background-color: var(--bg-color);
+    border-radius: var(--border-radius-base);
+    box-shadow: var(--box-shadow);
+    overflow: hidden;
+    z-index: 100;
+
+    &-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px;
+    }
+
+    &-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light-3));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    &-info {
+      flex: 1;
+    }
+
+    &-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text-primary);
+    }
+
+    &-role {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    &-divider {
+      height: 1px;
+      background-color: var(--color-border-lighter);
+    }
+
+    &-menu {
+      padding: 8px 0;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 16px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--color-text-regular);
+      transition: all 0.2s;
+
+      &:hover {
+        background-color: var(--color-fill);
+        color: var(--color-text-primary);
+      }
+
+      &--danger {
+        color: var(--color-danger);
+
+        &:hover {
+          background-color: var(--color-danger-light);
+          color: var(--color-danger);
+        }
+      }
+    }
+
+    &-icon {
+      font-size: 16px;
+    }
+  }
+}
+
+// 下拉动画
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

package/src/components/Layout/Sidebar.vue

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+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 } from '@xto/base'
+import { Input } from '@xto/form'
+import type { MenuItem as MenuItemType } from '@/types/api'
+
+const route = useRoute()
+const router = useRouter()
+const menuStore = useMenuStore()
+const userStore = useUserStore()
+const authStore = useAuthStore()
+const appStore = useAppStore()
+
+const searchKeyword = ref('')
+const isCollapsed = computed(() => appStore.isCollapsed)
+const activeMenu = computed(() => route.path)
+
+// 菜单主题相关
+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()
+  userStore.clearUserInfo()
+  menuStore.clearMenu()
+  router.push('/login')
+}
+
+// 菜单图标
+const getMenuIcon = (icon?: string) => {
+  const iconMap: Record<string, string> = {
+    dashboard: '📊',
+    system: '⚙️',
+    user: '👤',
+    role: '👥',
+    menu: '📋',
+    setting: '🔧'
+  }
+  return iconMap[icon || ''] || '📄'
+}
+</script>
+
+<template>
+  <div class="sidebar">
+    <!-- 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>
+    </div>
+
+    <!-- 搜索框 -->
+    <div v-if="!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"
+      :collapse="isCollapsed"
+      :collapse-transition="false"
+      :background-color="menuBgColor"
+      :text-color="menuTextColor"
+      :active-text-color="menuActiveTextColor"
+      class="sidebar__menu"
+      @select="handleMenuSelect"
+    >
+      <template v-for="menu in filteredMenuList" :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>
+            <span>{{ menu.title }}</span>
+          </template>
+          <MenuItem
+            v-for="child in menu.children"
+            :key="child.path"
+            :index="child.path"
+          >
+            <span class="menu-icon">{{ getMenuIcon(child.icon) }}</span>
+            <span>{{ child.title }}</span>
+          </MenuItem>
+        </SubMenu>
+        <!-- 无子菜单 -->
+        <MenuItem v-else :index="menu.path">
+          <span class="menu-icon">{{ getMenuIcon(menu.icon) }}</span>
+          <span>{{ menu.title }}</span>
+        </MenuItem>
+      </template>
+    </Menu>
+
+    <!-- 用户信息 -->
+    <div class="sidebar__user" v-if="!isCollapsed">
+      <div class="sidebar__user-info">
+        <span class="sidebar__user-name">{{ userStore.nickname }}</span>
+        <span class="sidebar__user-role">{{ userStore.roles.join(', ') }}</span>
+      </div>
+      <Button type="text" size="small" @click="handleLogout">退出</Button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color);
+
+  &__logo {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    border-bottom: 1px solid var(--color-border-lighter);
+  }
+
+  &__logo-img {
+    width: 32px;
+    height: 32px;
+  }
+
+  &__logo-text {
+    font-size: 16px;
+    font-weight: 600;
+    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;
+    overflow-y: auto;
+  }
+
+  &__user {
+    padding: 10px;
+    border-top: 1px solid var(--color-border-lighter);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__user-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__user-name {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__user-role {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.menu-icon {
+  margin-right: 8px;
+}
+</style>