xto-fronted 0.1.1 → 0.1.3

package/src/components/Layout/Header.vue

@@ -1,390 +1,335 @@
-<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);
-}
+<script setup lang="ts">
+/**
+ * 头部组件
+ * 使用统一的 useApp hooks
+ */
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useApp } from '@/composables'
+import { useAppStore } from '@/stores/app'
+
+const appStore = useAppStore()
+const { logout, userName, userInfo } = useApp()
+
+const dropdownVisible = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
+const isFullscreen = ref(false)
+
+// 用户显示名称
+const userDisplayName = computed(() => userName.value || '用户')
+
+// 切换折叠
+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 handleLogout = async () => {
+  closeDropdown()
+  await logout()
+}
+
+// 点击外部关闭下拉菜单
+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>☰</span>
+      </div>
+    </div>
+
+    <!-- 右侧 -->
+    <div class="header__right">
+      <!-- 全屏切换 -->
+      <div class="header__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
+        <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>{{ userDisplayName.charAt(0) }}</span>
+          </div>
+          <span class="header__user-name">{{ userDisplayName }}</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>{{ userDisplayName.charAt(0) }}</span>
+              </div>
+              <div class="header__dropdown-info">
+                <div class="header__dropdown-name">{{ userDisplayName }}</div>
+                <div class="header__dropdown-role">{{ userInfo?.departmentName || '' }}</div>
+              </div>
+            </div>
+            <div class="header__dropdown-divider"></div>
+            <div class="header__dropdown-menu">
+              <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);
+    }
+  }
+
+  &__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>