xto-fronted 0.3.3 → 0.3.4

package/src/components/Layout/Header.vue

@@ -6,6 +6,8 @@ import { useUserStore } from '@/stores/user'
 import { useAuthStore } from '@/stores/auth'
 import { useMenuStore } from '@/stores/menu'
 
+type LayoutMode = 'sidebar' | 'top' | 'mix'
+
 const route = useRoute()
 const router = useRouter()
 const appStore = useAppStore()
@@ -13,10 +15,30 @@ const userStore = useUserStore()
 const authStore = useAuthStore()
 const menuStore = useMenuStore()
 
-const isCollapsed = computed(() => appStore.isCollapsed)
 const dropdownVisible = ref(false)
+const layoutDropdownVisible = ref(false)
 const dropdownRef = ref<HTMLElement | null>(null)
 const isFullscreen = ref(false)
+const searchVisible = ref(false)
+const searchKeyword = ref('')
+const searchRef = ref<HTMLElement | null>(null)
+
+// 布局模式选项
+const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
+  { value: 'sidebar', label: '左侧菜单', icon: '📋' },
+  { value: 'top', label: '顶部菜单', icon: '☰' },
+  { value: 'mix', label: '混合菜单', icon: '⚡' }
+]
+
+// 主题色选项
+const colorOptions = [
+  { value: '#409eff', label: '默认蓝' },
+  { value: '#1890ff', label: '科技蓝' },
+  { value: '#52c41a', label: '极光绿' },
+  { value: '#faad14', label: '日落橙' },
+  { value: '#f5222d', label: '薄暮红' },
+  { value: '#722ed1', label: '酱紫' }
+]
 
 // 面包屑
 const breadcrumbs = computed(() => {
@@ -27,6 +49,31 @@ const breadcrumbs = computed(() => {
   }))
 })
 
+// 扁平化菜单用于搜索
+const flattenMenus = (menus: any[], parentTitle = ''): any[] => {
+  const result: any[] = []
+  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 currentLayout = computed(() => appStore.layout)
+
 // 切换折叠
 const toggleCollapse = () => {
   appStore.toggleCollapse()
@@ -37,6 +84,22 @@ const toggleTheme = () => {
   appStore.toggleTheme()
 }
 
+// 切换布局模式
+const handleLayoutChange = (mode: LayoutMode) => {
+  appStore.setLayout(mode)
+  layoutDropdownVisible.value = false
+}
+
+// 切换灰色模式
+const toggleGreyMode = () => {
+  const html = document.documentElement
+  if (html.classList.contains('grey-mode')) {
+    html.classList.remove('grey-mode')
+  } else {
+    html.classList.add('grey-mode')
+  }
+}
+
 // 切换全屏
 const toggleFullscreen = () => {
   if (!document.fullscreenElement) {
@@ -54,30 +117,58 @@ const handleFullscreenChange = () => {
 // 切换下拉菜单
 const toggleDropdown = () => {
   dropdownVisible.value = !dropdownVisible.value
+  layoutDropdownVisible.value = false
+}
+
+// 切换布局下拉菜单
+const toggleLayoutDropdown = () => {
+  layoutDropdownVisible.value = !layoutDropdownVisible.value
+  dropdownVisible.value = false
 }
 
 // 关闭下拉菜单
-const closeDropdown = () => {
+const closeDropdowns = () => {
   dropdownVisible.value = false
+  layoutDropdownVisible.value = false
+}
+
+// 显示搜索
+const showSearch = () => {
+  searchVisible.value = true
+}
+
+// 隐藏搜索
+const hideSearch = () => {
+  searchVisible.value = false
+  searchKeyword.value = ''
+}
+
+// 搜索结果点击
+const handleSearchItemClick = (path: string) => {
+  router.push(path)
+  hideSearch()
+}
+
+// 设置主题色
+const handleColorChange = (color: string) => {
+  appStore.setPrimaryColor(color)
 }
 
 // 个人信息
 const handleProfile = () => {
-  closeDropdown()
-  // TODO: 跳转到个人信息页面
-  alert('个人信息功能开发中...')
+  closeDropdowns()
+  router.push('/profile')
 }
 
 // 修改密码
 const handleChangePassword = () => {
-  closeDropdown()
-  // TODO: 打开修改密码弹窗
-  alert('修改密码功能开发中...')
+  closeDropdowns()
+  router.push('/change-password')
 }
 
 // 退出登录
 const handleLogout = () => {
-  closeDropdown()
+  closeDropdowns()
   authStore.logout()
   userStore.clearUserInfo()
   menuStore.clearMenu()
@@ -87,18 +178,37 @@ const handleLogout = () => {
 // 点击外部关闭下拉菜单
 const handleClickOutside = (event: MouseEvent) => {
   if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
-    closeDropdown()
+    closeDropdowns()
+  }
+  if (searchRef.value && !searchRef.value.contains(event.target as Node)) {
+    hideSearch()
+  }
+}
+
+// 键盘快捷键
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    hideSearch()
+    closeDropdowns()
+  }
+  // Ctrl+K 打开搜索
+  if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+    event.preventDefault()
+    showSearch()
   }
 }
 
 onMounted(() => {
   document.addEventListener('click', handleClickOutside)
   document.addEventListener('fullscreenchange', handleFullscreenChange)
+  document.addEventListener('keydown', handleKeydown)
+  appStore.initTheme()
 })
 
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside)
   document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  document.removeEventListener('keydown', handleKeydown)
 })
 </script>
 
@@ -106,13 +216,18 @@ onUnmounted(() => {
   <div class="header">
     <!-- 左侧 -->
     <div class="header__left">
+      <!-- 折叠按钮 -->
       <div class="header__collapse" @click="toggleCollapse">
-        <span v-if="isCollapsed">☰</span>
-        <span v-else>☰</span>
+        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+          <path v-if="appStore.isCollapsed" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+          <path v-else d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+        </svg>
       </div>
-      <div class="header__breadcrumb">
+
+      <!-- 面包屑 -->
+      <div v-if="appStore.showBreadcrumb" class="header__breadcrumb">
         <span v-for="(item, index) in breadcrumbs" :key="item.path">
-          <span v-if="index > 0"> / </span>
+          <span v-if="index > 0" class="breadcrumb-separator">/</span>
           <span :class="{ 'is-current': index === breadcrumbs.length - 1 }">
             {{ item.title }}
           </span>
@@ -122,8 +237,15 @@ onUnmounted(() => {
 
     <!-- 右侧 -->
     <div class="header__right">
+      <!-- 搜索按钮 -->
+      <div class="header__action" @click="showSearch" title="搜索 (Ctrl+K)">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+        </svg>
+      </div>
+
       <!-- 全屏切换 -->
-      <div class="header__action" @click="toggleFullscreen" :title="isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'">
+      <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>
@@ -132,10 +254,58 @@ onUnmounted(() => {
         </svg>
       </div>
 
+      <!-- 布局切换 -->
+      <div class="header__action header__layout" ref="dropdownRef">
+        <div class="header__action-trigger" @click.stop="toggleLayoutDropdown">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+            <path d="M3 3h18v18H3V3zm2 2v6h14V5H5zm0 8v6h6v-6H5zm8 0v6h6v-6h-6z"/>
+          </svg>
+        </div>
+
+        <!-- 布局下拉菜单 -->
+        <Transition name="dropdown">
+          <div v-if="layoutDropdownVisible" class="header__layout-dropdown">
+            <div class="header__layout-title">布局模式</div>
+            <div class="header__layout-options">
+              <div
+                v-for="option in layoutOptions"
+                :key="option.value"
+                :class="['header__layout-option', { 'is-active': currentLayout === option.value }]"
+                @click="handleLayoutChange(option.value)"
+              >
+                <span class="layout-icon">{{ option.icon }}</span>
+                <span>{{ option.label }}</span>
+              </div>
+            </div>
+            <div class="header__layout-divider"></div>
+            <div class="header__layout-title">主题色</div>
+            <div class="header__color-options">
+              <div
+                v-for="color in colorOptions"
+                :key="color.value"
+                :class="['header__color-option', { 'is-active': appStore.primaryColor === color.value }]"
+                :style="{ backgroundColor: color.value }"
+                :title="color.label"
+                @click="handleColorChange(color.value)"
+              ></div>
+            </div>
+            <div class="header__layout-divider"></div>
+            <div class="header__layout-item" @click="toggleGreyMode">
+              <span class="layout-icon">🌫️</span>
+              <span>灰色模式</span>
+            </div>
+          </div>
+        </Transition>
+      </div>
+
       <!-- 主题切换 -->
       <div class="header__action" @click="toggleTheme" title="切换主题">
-        <span v-if="appStore.isDark">🌙</span>
-        <span v-else>☀️</span>
+        <svg v-if="appStore.isDark" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+          <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-3.03 0-5.5-2.47-5.5-5.5 0-1.82.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
+        </svg>
+        <svg v-else viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+          <path d="M6.76 4.84l-1.4-1.4-1.41 1.41 1.4 1.4 1.41-1.41zm10.49 10.49l-1.4-1.4-1.41 1.41 1.4 1.4 1.41-1.41zM12 4c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-9h-2v4h2v-4zm0-6h-2v2h2V5zM4.84 17.24l-1.41 1.41 1.4 1.4 1.41-1.41-1.4-1.4z"/>
+        </svg>
       </div>
 
       <!-- 用户头像 -->
@@ -157,7 +327,7 @@ onUnmounted(() => {
               </div>
               <div class="header__dropdown-info">
                 <div class="header__dropdown-name">{{ userStore.nickname }}</div>
-                <div class="header__dropdown-role">{{ userStore.roles.join(', ') }}</div>
+                <div class="header__dropdown-role">{{ userStore.roles?.join(', ') }}</div>
               </div>
             </div>
             <div class="header__dropdown-divider"></div>
@@ -180,6 +350,45 @@ onUnmounted(() => {
         </Transition>
       </div>
     </div>
+
+    <!-- 全局搜索弹窗 -->
+    <Transition name="search">
+      <div v-if="searchVisible" class="header__search-modal" ref="searchRef">
+        <div class="search-container">
+          <div class="search-input-wrapper">
+            <svg class="search-icon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
+              <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+            </svg>
+            <input
+              v-model="searchKeyword"
+              type="text"
+              class="search-input"
+              placeholder="搜索菜单..."
+              autofocus
+              @keyup.enter="searchResults[0] && handleSearchItemClick(searchResults[0].path)"
+            />
+            <span class="search-shortcut">ESC 关闭</span>
+          </div>
+          <div v-if="searchResults.length > 0" class="search-results">
+            <div
+              v-for="(item, index) in searchResults"
+              :key="item.path"
+              :class="['search-result-item', { 'is-first': index === 0 }]"
+              @click="handleSearchItemClick(item.path)"
+            >
+              <span class="search-result-icon">{{ item.icon || '📄' }}</span>
+              <div class="search-result-info">
+                <span class="search-result-title">{{ item.title }}</span>
+                <span v-if="item.parentTitle" class="search-result-parent">{{ item.parentTitle }}</span>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="searchKeyword" class="search-empty">
+            未找到匹配的菜单
+          </div>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -190,6 +399,8 @@ onUnmounted(() => {
   justify-content: space-between;
   padding: 0 20px;
   height: 100%;
+  background-color: var(--bg-color);
+  border-bottom: 1px solid var(--color-border-lighter);
 
   &__left {
     display: flex;
@@ -204,8 +415,8 @@ onUnmounted(() => {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    font-size: 18px;
     color: var(--color-text-regular);
+    transition: color 0.2s;
 
     &:hover {
       color: var(--color-primary);
@@ -216,6 +427,11 @@ onUnmounted(() => {
     font-size: 14px;
     color: var(--color-text-secondary);
 
+    .breadcrumb-separator {
+      margin: 0 8px;
+      color: var(--color-text-placeholder);
+    }
+
     .is-current {
       color: var(--color-text-primary);
       font-weight: 500;
@@ -225,7 +441,7 @@ onUnmounted(() => {
   &__right {
     display: flex;
     align-items: center;
-    gap: 15px;
+    gap: 8px;
   }
 
   &__action {
@@ -236,7 +452,107 @@ onUnmounted(() => {
     justify-content: center;
     cursor: pointer;
     border-radius: var(--border-radius-base);
-    font-size: 16px;
+    color: var(--color-text-regular);
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: var(--color-fill);
+      color: var(--color-primary);
+    }
+  }
+
+  &__layout {
+    position: relative;
+  }
+
+  &__layout-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);
+    padding: 12px;
+    z-index: 100;
+  }
+
+  &__layout-title {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    margin-bottom: 8px;
+    padding-left: 4px;
+  }
+
+  &__layout-options {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__layout-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: var(--border-radius-base);
+    font-size: 14px;
+    color: var(--color-text-regular);
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: var(--color-fill);
+    }
+
+    &.is-active {
+      color: var(--color-primary);
+      background-color: var(--color-primary-light-9);
+    }
+
+    .layout-icon {
+      font-size: 16px;
+    }
+  }
+
+  &__color-options {
+    display: flex;
+    gap: 8px;
+    padding: 8px 0;
+  }
+
+  &__color-option {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+
+    &.is-active {
+      box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px currentColor;
+    }
+  }
+
+  &__layout-divider {
+    height: 1px;
+    background-color: var(--color-border-lighter);
+    margin: 8px 0;
+  }
+
+  &__layout-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: var(--border-radius-base);
+    font-size: 14px;
+    color: var(--color-text-regular);
+    transition: all 0.2s;
 
     &:hover {
       background-color: var(--color-fill);
@@ -245,6 +561,7 @@ onUnmounted(() => {
 
   &__user {
     position: relative;
+    margin-left: 8px;
 
     &-trigger {
       display: flex;
@@ -263,6 +580,10 @@ onUnmounted(() => {
     &-name {
       font-size: 14px;
       color: var(--color-text-primary);
+      max-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     &-arrow {
@@ -374,6 +695,114 @@ onUnmounted(() => {
       font-size: 16px;
     }
   }
+
+  &__search-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 100px;
+    z-index: 200;
+  }
+}
+
+// 搜索容器
+.search-container {
+  width: 600px;
+  max-width: 90vw;
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-large);
+  box-shadow: var(--box-shadow-dark);
+  overflow: hidden;
+}
+
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--color-border-lighter);
+
+  .search-icon {
+    color: var(--color-text-secondary);
+    margin-right: 12px;
+  }
+
+  .search-input {
+    flex: 1;
+    font-size: 16px;
+    color: var(--color-text-primary);
+    background: transparent;
+    border: none;
+    outline: none;
+
+    &::placeholder {
+      color: var(--color-text-placeholder);
+    }
+  }
+
+  .search-shortcut {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+    padding: 4px 8px;
+    background-color: var(--color-fill);
+    border-radius: var(--border-radius-base);
+  }
+}
+
+.search-results {
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.search-result-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--color-fill);
+  }
+
+  &.is-first {
+    background-color: var(--color-primary-light-9);
+  }
+
+  .search-result-icon {
+    font-size: 20px;
+  }
+
+  .search-result-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .search-result-title {
+    font-size: 14px;
+    color: var(--color-text-primary);
+  }
+
+  .search-result-parent {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+}
+
+.search-empty {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--color-text-secondary);
+  font-size: 14px;
 }
 
 // 下拉动画
@@ -387,4 +816,20 @@ onUnmounted(() => {
   opacity: 0;
   transform: translateY(-10px);
 }
+
+// 搜索弹窗动画
+.search-enter-active,
+.search-leave-active {
+  transition: all 0.2s ease;
+}
+
+.search-enter-from,
+.search-leave-to {
+  opacity: 0;
+}
+
+// 灰色模式
+:root.grey-mode {
+  filter: grayscale(100%);
+}
 </style>