xto-fronted 0.4.110 → 0.4.112

package/src/components/Layout/Header.vue

@@ -1,1013 +1,1013 @@
-<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'
-import { Icon } from '@xto/base'
-import { Drawer } from '@xto/feedback'
-
-type LayoutMode = 'sidebar' | 'top' | 'mix'
-
-const route = useRoute()
-const router = useRouter()
-const appStore = useAppStore()
-const userStore = useUserStore()
-const authStore = useAuthStore()
-const menuStore = useMenuStore()
-
-const dropdownVisible = ref(false)
-const drawerVisible = 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 greyMode = ref(false)
-
-// 布局模式选项
-const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
-  { value: 'sidebar', label: '左侧菜单', icon: 'sidebar-left' },
-  { value: 'top', label: '顶部菜单', icon: 'menu' },
-  { value: 'mix', label: '混合菜单', icon: 'grid' }
-]
-
-// 主题色选项
-const colorOptions = [
-  { value: '#409eff', label: '默认蓝' },
-  { value: '#1890ff', label: '科技蓝' },
-  { value: '#52c41a', label: '极光绿' },
-  { value: '#faad14', label: '日落橙' },
-  { value: '#f5222d', label: '薄暮红' },
-  { value: '#722ed1', label: '酱紫' }
-]
-
-// 面包屑
-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 flattenMenus = (menus: any[], parentTitle = ''): any[] => {
-  const result: any[] = []
-  menus.forEach(menu => {
-    if (menu.children && menu.children.length > 0) {
-      result.push(...flattenMenus(menu.children, menu.menuName))
-    } else {
-      result.push({ ...menu, parentTitle, title: menu.menuName, path: menu.menuUrl })
-    }
-  })
-  return result
-}
-
-// 已知的图标名称列表（来自 @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 ''
-  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 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()
-}
-
-// 切换主题
-const toggleTheme = () => {
-  appStore.toggleTheme()
-}
-
-// 打开设置抽屉
-const openSettingsDrawer = () => {
-  drawerVisible.value = true
-}
-
-// 切换布局模式
-const handleLayoutChange = (mode: LayoutMode) => {
-  appStore.setLayout(mode)
-  drawerVisible.value = false
-}
-
-// 切换灰色模式
-const handleGreyModeChange = (value: boolean) => {
-  greyMode.value = value
-  const html = document.documentElement
-  if (value) {
-    html.classList.add('grey-mode')
-  } else {
-    html.classList.remove('grey-mode')
-  }
-}
-
-// 抽屉内灰色模式开关
-const handleGreyModeToggle = () => {
-  handleGreyModeChange(!greyMode.value)
-  drawerVisible.value = false
-}
-
-// 抽屉内暗黑模式开关
-const handleDarkModeToggle = () => {
-  appStore.toggleTheme()
-  drawerVisible.value = false
-}
-
-// 切换全屏
-const toggleFullscreen = () => {
-  if (!document.fullscreenElement) {
-    document.documentElement.requestFullscreen()
-  } else {
-    document.exitFullscreen()
-  }
-}
-
-// 监听全屏变化
-const handleFullscreenChange = () => {
-  isFullscreen.value = !!document.fullscreenElement
-}
-
-// 切换下拉菜单
-const toggleDropdown = () => {
-  dropdownVisible.value = !dropdownVisible.value
-}
-
-// 关闭下拉菜单
-const closeDropdowns = () => {
-  dropdownVisible.value = false
-}
-
-// 隐藏搜索
-const hideSearch = () => {
-  searchVisible.value = false
-  searchKeyword.value = ''
-}
-
-// 搜索结果点击
-const handleSearchItemClick = (path: string) => {
-  router.push(path)
-  hideSearch()
-}
-
-// 设置主题色
-const handleColorChange = (color: string) => {
-  appStore.setPrimaryColor(color)
-  drawerVisible.value = false
-}
-
-// 个人信息
-const handleProfile = () => {
-  closeDropdowns()
-  router.push('/profile')
-}
-
-// 修改密码
-const handleChangePassword = () => {
-  closeDropdowns()
-  router.push('/change-password')
-}
-
-// 退出登录
-const handleLogout = () => {
-  closeDropdowns()
-  authStore.logout()
-  userStore.clearUserInfo()
-  menuStore.clearMenu()
-  router.push(appStore.loginPath)
-}
-
-// 点击外部关闭下拉菜单
-const handleClickOutside = (event: MouseEvent) => {
-  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
-    closeDropdowns()
-  }
-  if (searchRef.value && !searchRef.value.contains(event.target as Node)) {
-    hideSearch()
-  }
-}
-
-// 键盘快捷键
-const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Escape') {
-    hideSearch()
-    closeDropdowns()
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-  document.addEventListener('fullscreenchange', handleFullscreenChange)
-  document.addEventListener('keydown', handleKeydown)
-  appStore.initTheme()
-  // 初始化灰色模式状态
-  greyMode.value = document.documentElement.classList.contains('grey-mode')
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-  document.removeEventListener('fullscreenchange', handleFullscreenChange)
-  document.removeEventListener('keydown', handleKeydown)
-})
-</script>
-
-<template>
-  <div class="header">
-    <!-- 左侧 -->
-    <div class="header__left">
-      <!-- 折叠按钮 -->
-      <div class="header__collapse" @click="toggleCollapse">
-        <Icon :name="appStore.isCollapsed ? 'menu-unfold' : 'menu-fold'" :size="18" />
-      </div>
-
-      <!-- 面包屑 -->
-      <div v-if="appStore.showBreadcrumb" class="header__breadcrumb">
-        <span v-for="(item, index) in breadcrumbs" :key="item.path">
-          <span v-if="index > 0" class="breadcrumb-separator">/</span>
-          <span :class="{ 'is-current': index === breadcrumbs.length - 1 }">
-            {{ item.title }}
-          </span>
-        </span>
-      </div>
-    </div>
-
-    <!-- 右侧 -->
-    <div class="header__right">
-      <!-- 搜索输入框 -->
-      <div class="header__search" ref="searchRef">
-        <Icon name="search" :size="14" class="header__search-icon" />
-        <input
-          v-model="searchKeyword"
-          type="text"
-          class="header__search-input"
-          placeholder="搜索菜单..."
-          @focus="searchVisible = true"
-        />
-        <!-- 搜索结果下拉 -->
-        <Transition name="search-dropdown">
-          <div v-if="searchVisible && (searchResults.length > 0 || searchKeyword)" class="header__search-dropdown">
-            <div v-if="searchResults.length > 0" class="header__search-results">
-              <div
-                v-for="item in searchResults"
-                :key="item.path"
-                class="header__search-item"
-                @click="handleSearchItemClick(item.path)"
-              >
-                <span v-if="item.title !== '首页'" class="header__search-icon">
-                  <Icon v-if="iconExists(getMenuIcon(item.icon))" :name="getMenuIcon(item.icon)" :size="16" />
-                  <span v-else class="header__search-char">{{ getFirstChar(item.title) }}</span>
-                </span>
-                <span class="header__search-item-title">{{ item.title }}</span>
-                <span v-if="item.parentTitle" class="header__search-item-parent">{{ item.parentTitle }}</span>
-              </div>
-            </div>
-            <div v-else class="header__search-empty">
-              未找到匹配的菜单
-            </div>
-          </div>
-        </Transition>
-      </div>
-
-      <!-- 全屏切换 -->
-      <div class="header__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
-        <Icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" :size="16" />
-      </div>
-
-      <!-- 换肤设置 -->
-      <div class="header__action" @click="openSettingsDrawer" title="换肤设置">
-        <Icon name="skin" :size="16" />
-      </div>
-
-      <!-- 主题切换 -->
-      <div class="header__action" @click="toggleTheme" title="切换主题">
-        <Icon :name="appStore.isDark ? 'sun' : 'moon'" :size="16" />
-      </div>
-
-      <!-- 用户头像 -->
-      <div class="header__user" ref="dropdownRef">
-        <div class="header__user-trigger" @click.stop="toggleDropdown">
-          <div class="header__avatar">
-            <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
-          </div>
-          <span class="header__user-name">{{ userStore.userName }}</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.userName?.charAt(0) || 'U' }}</span>
-              </div>
-              <div class="header__dropdown-info">
-                <div class="header__dropdown-name">{{ userStore.userName }}</div>
-                <div class="header__dropdown-role">{{ userStore.departmentName }}</div>
-              </div>
-            </div>
-            <div class="header__dropdown-divider"></div>
-            <div class="header__dropdown-menu">
-              <div class="header__dropdown-item" @click="handleProfile">
-                <Icon name="user" :size="16" />
-                <span>个人信息</span>
-              </div>
-              <div class="header__dropdown-item" @click="handleChangePassword">
-                <Icon name="lock" :size="16" />
-                <span>修改密码</span>
-              </div>
-              <div class="header__dropdown-divider"></div>
-              <div class="header__dropdown-item header__dropdown-item--danger" @click="handleLogout">
-                <Icon name="logout" :size="16" />
-                <span>退出登录</span>
-              </div>
-            </div>
-          </div>
-        </Transition>
-      </div>
-    </div>
-
-    <!-- 换肤设置抽屉 -->
-    <Drawer
-      v-model="drawerVisible"
-      title="换肤设置"
-      direction="rtl"
-      size="320px"
-    >
-      <div class="settings-drawer">
-        <!-- 布局模式 -->
-        <div class="settings-section">
-          <div class="settings-title">布局模式</div>
-          <div class="settings-layout-options">
-            <div
-              v-for="option in layoutOptions"
-              :key="option.value"
-              :class="['layout-option', { 'is-active': currentLayout === option.value }]"
-              @click="handleLayoutChange(option.value)"
-            >
-              <div class="layout-option__preview">
-                <div v-if="option.value === 'sidebar'" class="layout-preview-sidebar">
-                  <div class="preview-aside"></div>
-                  <div class="preview-main">
-                    <div class="preview-header"></div>
-                    <div class="preview-content"></div>
-                  </div>
-                </div>
-                <div v-else-if="option.value === 'top'" class="layout-preview-top">
-                  <div class="preview-header-full"></div>
-                  <div class="preview-content-full"></div>
-                </div>
-                <div v-else class="layout-preview-mix">
-                  <div class="preview-header-mix">
-                    <div class="preview-mix-left"></div>
-                  </div>
-                  <div class="preview-mix-body">
-                    <div class="preview-mix-aside"></div>
-                    <div class="preview-mix-content"></div>
-                  </div>
-                </div>
-              </div>
-              <span class="layout-option__label">{{ option.label }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 主题色 -->
-        <div class="settings-section">
-          <div class="settings-title">主题色</div>
-          <div class="settings-color-options">
-            <div
-              v-for="color in colorOptions"
-              :key="color.value"
-              :class="['color-option', { 'is-active': appStore.primaryColor === color.value }]"
-              :style="{ backgroundColor: color.value }"
-              :title="color.label"
-              @click="handleColorChange(color.value)"
-            >
-              <Icon v-if="appStore.primaryColor === color.value" name="check" :size="12" color="#fff" />
-            </div>
-          </div>
-        </div>
-
-        <!-- 功能开关 -->
-        <div class="settings-section">
-          <div class="settings-title">功能设置</div>
-          <div class="settings-switch-list">
-            <div class="settings-switch-item">
-              <span>灰色模式</span>
-              <div class="switch-wrapper" :class="{ 'is-checked': greyMode }" @click="handleGreyModeToggle">
-                <span class="switch-core"></span>
-              </div>
-            </div>
-            <div class="settings-switch-item">
-              <span>暗黑模式</span>
-              <div class="switch-wrapper" :class="{ 'is-checked': appStore.isDark }" @click="handleDarkModeToggle">
-                <span class="switch-core"></span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Drawer>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  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;
-    align-items: center;
-    gap: 15px;
-  }
-
-  &__collapse {
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: var(--color-text-regular);
-    transition: color 0.2s;
-
-    &:hover {
-      color: var(--color-primary);
-    }
-  }
-
-  &__breadcrumb {
-    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;
-    }
-  }
-
-  &__right {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  &__search {
-    position: relative;
-    display: flex;
-    align-items: center;
-    background-color: var(--color-fill-light);
-    border-radius: var(--border-radius-base);
-    padding: 0 12px;
-    height: 32px;
-    width: 200px;
-
-    &-icon {
-      color: var(--color-text-secondary);
-    }
-
-    &-input {
-      flex: 1;
-      height: 100%;
-      font-size: 14px;
-      color: var(--color-text-primary);
-      background: transparent;
-      border: none;
-      outline: none;
-      padding-left: 8px;
-
-      &::placeholder {
-        color: var(--color-text-placeholder);
-      }
-    }
-
-    &-dropdown {
-      position: absolute;
-      top: calc(100% + 4px);
-      left: 0;
-      right: 0;
-      min-width: 200px;
-      max-height: 300px;
-      overflow-y: auto;
-      background-color: var(--bg-color);
-      border-radius: var(--border-radius-base);
-      box-shadow: var(--box-shadow);
-      z-index: 100;
-    }
-
-    &-results {
-      padding: 8px 0;
-    }
-
-    &-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      cursor: pointer;
-      transition: background-color 0.2s;
-
-      &:hover {
-        background-color: var(--color-fill);
-      }
-
-      &-title {
-        font-size: 14px;
-        color: var(--color-text-primary);
-      }
-
-      &-parent {
-        font-size: 12px;
-        color: var(--color-text-secondary);
-        margin-left: auto;
-      }
-    }
-
-    &-icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
-      flex-shrink: 0;
-    }
-
-    &-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;
-    }
-
-    &-empty {
-      padding: 16px 12px;
-      text-align: center;
-      color: var(--color-text-secondary);
-      font-size: 14px;
-    }
-  }
-
-  &__action {
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: var(--border-radius-base);
-    color: var(--color-text-regular);
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: var(--color-fill);
-      color: var(--color-primary);
-    }
-  }
-
-  &__user {
-    position: relative;
-    margin-left: 8px;
-
-    &-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);
-      max-width: 100px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &-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);
-        }
-      }
-    }
-  }
-}
-
-// 设置抽屉内容
-.settings-drawer {
-  .settings-section {
-    margin-bottom: 24px;
-  }
-
-  .settings-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text-primary);
-    margin-bottom: 12px;
-  }
-
-  .settings-layout-options {
-    display: flex;
-    gap: 12px;
-  }
-
-  .layout-option {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    padding: 12px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-base);
-    cursor: pointer;
-    transition: all 0.2s;
-
-    &:hover {
-      border-color: var(--color-primary-light-5);
-    }
-
-    &.is-active {
-      border-color: var(--color-primary);
-      background-color: var(--color-primary-light-9);
-    }
-
-    &__preview {
-      width: 48px;
-      height: 36px;
-      border: 1px solid var(--color-border-light);
-      border-radius: 2px;
-      overflow: hidden;
-    }
-
-    &__label {
-      font-size: 12px;
-      color: var(--color-text-regular);
-    }
-  }
-
-  // 布局预览样式
-  .layout-preview-sidebar {
-    display: flex;
-    height: 100%;
-
-    .preview-aside {
-      width: 25%;
-      height: 100%;
-      background-color: var(--color-primary-light-7);
-    }
-
-    .preview-main {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-
-      .preview-header {
-        height: 20%;
-        background-color: var(--color-border-light);
-      }
-
-      .preview-content {
-        flex: 1;
-        background-color: var(--bg-color-page);
-      }
-    }
-  }
-
-  .layout-preview-top {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .preview-header-full {
-      height: 25%;
-      background-color: var(--color-primary-light-7);
-    }
-
-    .preview-content-full {
-      flex: 1;
-      background-color: var(--bg-color-page);
-    }
-  }
-
-  .layout-preview-mix {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .preview-header-mix {
-      height: 25%;
-      background-color: var(--color-primary-light-7);
-      display: flex;
-
-      .preview-mix-left {
-        width: 30%;
-        background-color: var(--color-primary);
-      }
-    }
-
-    .preview-mix-body {
-      flex: 1;
-      display: flex;
-
-      .preview-mix-aside {
-        width: 25%;
-        background-color: var(--color-primary-light-8);
-      }
-
-      .preview-mix-content {
-        flex: 1;
-        background-color: var(--bg-color-page);
-      }
-    }
-  }
-
-  .settings-color-options {
-    display: flex;
-    gap: 12px;
-  }
-
-  .color-option {
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: transform 0.2s;
-
-    &:hover {
-      transform: scale(1.1);
-    }
-
-    &.is-active {
-      box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--color-primary);
-    }
-  }
-
-  .settings-switch-list {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .settings-switch-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    span {
-      font-size: 14px;
-      color: var(--color-text-regular);
-    }
-  }
-
-  .switch-wrapper {
-    width: 44px;
-    height: 22px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    .switch-core {
-      width: 100%;
-      height: 100%;
-      border-radius: 11px;
-      background-color: var(--color-border);
-      position: relative;
-      transition: background-color 0.2s;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 2px;
-        left: 2px;
-        width: 18px;
-        height: 18px;
-        background-color: #fff;
-        border-radius: 50%;
-        transition: left 0.2s;
-      }
-    }
-
-    &.is-checked {
-      .switch-core {
-        background-color: var(--color-primary);
-
-        &::after {
-          left: 24px;
-        }
-      }
-    }
-  }
-}
-
-// 下拉动画
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all 0.2s ease;
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-10px);
-}
-
-// 搜索下拉动画
-.search-dropdown-enter-active,
-.search-dropdown-leave-active {
-  transition: all 0.2s ease;
-}
-
-.search-dropdown-enter-from,
-.search-dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
+<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'
+import { Icon } from '@xto/base'
+import { Drawer } from '@xto/feedback'
+
+type LayoutMode = 'sidebar' | 'top' | 'mix'
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+const userStore = useUserStore()
+const authStore = useAuthStore()
+const menuStore = useMenuStore()
+
+const dropdownVisible = ref(false)
+const drawerVisible = 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 greyMode = ref(false)
+
+// 布局模式选项
+const layoutOptions: { value: LayoutMode; label: string; icon: string }[] = [
+  { value: 'sidebar', label: '左侧菜单', icon: 'sidebar-left' },
+  { value: 'top', label: '顶部菜单', icon: 'menu' },
+  { value: 'mix', label: '混合菜单', icon: 'grid' }
+]
+
+// 主题色选项
+const colorOptions = [
+  { value: '#409eff', label: '默认蓝' },
+  { value: '#1890ff', label: '科技蓝' },
+  { value: '#52c41a', label: '极光绿' },
+  { value: '#faad14', label: '日落橙' },
+  { value: '#f5222d', label: '薄暮红' },
+  { value: '#722ed1', label: '酱紫' }
+]
+
+// 面包屑
+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 flattenMenus = (menus: any[], parentTitle = ''): any[] => {
+  const result: any[] = []
+  menus.forEach(menu => {
+    if (menu.children && menu.children.length > 0) {
+      result.push(...flattenMenus(menu.children, menu.menuName))
+    } else {
+      result.push({ ...menu, parentTitle, title: menu.menuName, path: menu.menuUrl })
+    }
+  })
+  return result
+}
+
+// 已知的图标名称列表（来自 @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 ''
+  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 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()
+}
+
+// 切换主题
+const toggleTheme = () => {
+  appStore.toggleTheme()
+}
+
+// 打开设置抽屉
+const openSettingsDrawer = () => {
+  drawerVisible.value = true
+}
+
+// 切换布局模式
+const handleLayoutChange = (mode: LayoutMode) => {
+  appStore.setLayout(mode)
+  drawerVisible.value = false
+}
+
+// 切换灰色模式
+const handleGreyModeChange = (value: boolean) => {
+  greyMode.value = value
+  const html = document.documentElement
+  if (value) {
+    html.classList.add('grey-mode')
+  } else {
+    html.classList.remove('grey-mode')
+  }
+}
+
+// 抽屉内灰色模式开关
+const handleGreyModeToggle = () => {
+  handleGreyModeChange(!greyMode.value)
+  drawerVisible.value = false
+}
+
+// 抽屉内暗黑模式开关
+const handleDarkModeToggle = () => {
+  appStore.toggleTheme()
+  drawerVisible.value = false
+}
+
+// 切换全屏
+const toggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen()
+  } else {
+    document.exitFullscreen()
+  }
+}
+
+// 监听全屏变化
+const handleFullscreenChange = () => {
+  isFullscreen.value = !!document.fullscreenElement
+}
+
+// 切换下拉菜单
+const toggleDropdown = () => {
+  dropdownVisible.value = !dropdownVisible.value
+}
+
+// 关闭下拉菜单
+const closeDropdowns = () => {
+  dropdownVisible.value = false
+}
+
+// 隐藏搜索
+const hideSearch = () => {
+  searchVisible.value = false
+  searchKeyword.value = ''
+}
+
+// 搜索结果点击
+const handleSearchItemClick = (path: string) => {
+  router.push(path)
+  hideSearch()
+}
+
+// 设置主题色
+const handleColorChange = (color: string) => {
+  appStore.setPrimaryColor(color)
+  drawerVisible.value = false
+}
+
+// 个人信息
+const handleProfile = () => {
+  closeDropdowns()
+  router.push('/profile')
+}
+
+// 修改密码
+const handleChangePassword = () => {
+  closeDropdowns()
+  router.push('/change-password')
+}
+
+// 退出登录
+const handleLogout = () => {
+  closeDropdowns()
+  authStore.logout()
+  userStore.clearUserInfo()
+  menuStore.clearMenu()
+  router.push(appStore.loginPath)
+}
+
+// 点击外部关闭下拉菜单
+const handleClickOutside = (event: MouseEvent) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    closeDropdowns()
+  }
+  if (searchRef.value && !searchRef.value.contains(event.target as Node)) {
+    hideSearch()
+  }
+}
+
+// 键盘快捷键
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    hideSearch()
+    closeDropdowns()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  document.addEventListener('keydown', handleKeydown)
+  appStore.initTheme()
+  // 初始化灰色模式状态
+  greyMode.value = document.documentElement.classList.contains('grey-mode')
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <div class="header">
+    <!-- 左侧 -->
+    <div class="header__left">
+      <!-- 折叠按钮 -->
+      <div class="header__collapse" @click="toggleCollapse">
+        <Icon :name="appStore.isCollapsed ? 'menu-unfold' : 'menu-fold'" :size="18" />
+      </div>
+
+      <!-- 面包屑 -->
+      <div v-if="appStore.showBreadcrumb" class="header__breadcrumb">
+        <span v-for="(item, index) in breadcrumbs" :key="item.path">
+          <span v-if="index > 0" class="breadcrumb-separator">/</span>
+          <span :class="{ 'is-current': index === breadcrumbs.length - 1 }">
+            {{ item.title }}
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <!-- 右侧 -->
+    <div class="header__right">
+      <!-- 搜索输入框 -->
+      <div class="header__search" ref="searchRef">
+        <Icon name="search" :size="14" class="header__search-icon" />
+        <input
+          v-model="searchKeyword"
+          type="text"
+          class="header__search-input"
+          placeholder="搜索菜单..."
+          @focus="searchVisible = true"
+        />
+        <!-- 搜索结果下拉 -->
+        <Transition name="search-dropdown">
+          <div v-if="searchVisible && (searchResults.length > 0 || searchKeyword)" class="header__search-dropdown">
+            <div v-if="searchResults.length > 0" class="header__search-results">
+              <div
+                v-for="item in searchResults"
+                :key="item.path"
+                class="header__search-item"
+                @click="handleSearchItemClick(item.path)"
+              >
+                <span v-if="item.title !== '首页'" class="header__search-icon">
+                  <Icon v-if="iconExists(getMenuIcon(item.icon))" :name="getMenuIcon(item.icon)" :size="16" />
+                  <span v-else class="header__search-char">{{ getFirstChar(item.title) }}</span>
+                </span>
+                <span class="header__search-item-title">{{ item.title }}</span>
+                <span v-if="item.parentTitle" class="header__search-item-parent">{{ item.parentTitle }}</span>
+              </div>
+            </div>
+            <div v-else class="header__search-empty">
+              未找到匹配的菜单
+            </div>
+          </div>
+        </Transition>
+      </div>
+
+      <!-- 全屏切换 -->
+      <div class="header__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
+        <Icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" :size="16" />
+      </div>
+
+      <!-- 换肤设置 -->
+      <div class="header__action" @click="openSettingsDrawer" title="换肤设置">
+        <Icon name="skin" :size="16" />
+      </div>
+
+      <!-- 主题切换 -->
+      <div class="header__action" @click="toggleTheme" title="切换主题">
+        <Icon :name="appStore.isDark ? 'sun' : 'moon'" :size="16" />
+      </div>
+
+      <!-- 用户头像 -->
+      <div class="header__user" ref="dropdownRef">
+        <div class="header__user-trigger" @click.stop="toggleDropdown">
+          <div class="header__avatar">
+            <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
+          </div>
+          <span class="header__user-name">{{ userStore.userName }}</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.userName?.charAt(0) || 'U' }}</span>
+              </div>
+              <div class="header__dropdown-info">
+                <div class="header__dropdown-name">{{ userStore.userName }}</div>
+                <div class="header__dropdown-role">{{ userStore.roleName || userStore.departmentName }}</div>
+              </div>
+            </div>
+            <div class="header__dropdown-divider"></div>
+            <div class="header__dropdown-menu">
+              <div class="header__dropdown-item" @click="handleProfile">
+                <Icon name="user" :size="16" />
+                <span>个人信息</span>
+              </div>
+              <div class="header__dropdown-item" @click="handleChangePassword">
+                <Icon name="lock" :size="16" />
+                <span>修改密码</span>
+              </div>
+              <div class="header__dropdown-divider"></div>
+              <div class="header__dropdown-item header__dropdown-item--danger" @click="handleLogout">
+                <Icon name="logout" :size="16" />
+                <span>退出登录</span>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+
+    <!-- 换肤设置抽屉 -->
+    <Drawer
+      v-model="drawerVisible"
+      title="换肤设置"
+      direction="rtl"
+      size="320px"
+    >
+      <div class="settings-drawer">
+        <!-- 布局模式 -->
+        <div class="settings-section">
+          <div class="settings-title">布局模式</div>
+          <div class="settings-layout-options">
+            <div
+              v-for="option in layoutOptions"
+              :key="option.value"
+              :class="['layout-option', { 'is-active': currentLayout === option.value }]"
+              @click="handleLayoutChange(option.value)"
+            >
+              <div class="layout-option__preview">
+                <div v-if="option.value === 'sidebar'" class="layout-preview-sidebar">
+                  <div class="preview-aside"></div>
+                  <div class="preview-main">
+                    <div class="preview-header"></div>
+                    <div class="preview-content"></div>
+                  </div>
+                </div>
+                <div v-else-if="option.value === 'top'" class="layout-preview-top">
+                  <div class="preview-header-full"></div>
+                  <div class="preview-content-full"></div>
+                </div>
+                <div v-else class="layout-preview-mix">
+                  <div class="preview-header-mix">
+                    <div class="preview-mix-left"></div>
+                  </div>
+                  <div class="preview-mix-body">
+                    <div class="preview-mix-aside"></div>
+                    <div class="preview-mix-content"></div>
+                  </div>
+                </div>
+              </div>
+              <span class="layout-option__label">{{ option.label }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 主题色 -->
+        <div class="settings-section">
+          <div class="settings-title">主题色</div>
+          <div class="settings-color-options">
+            <div
+              v-for="color in colorOptions"
+              :key="color.value"
+              :class="['color-option', { 'is-active': appStore.primaryColor === color.value }]"
+              :style="{ backgroundColor: color.value }"
+              :title="color.label"
+              @click="handleColorChange(color.value)"
+            >
+              <Icon v-if="appStore.primaryColor === color.value" name="check" :size="12" color="#fff" />
+            </div>
+          </div>
+        </div>
+
+        <!-- 功能开关 -->
+        <div class="settings-section">
+          <div class="settings-title">功能设置</div>
+          <div class="settings-switch-list">
+            <div class="settings-switch-item">
+              <span>灰色模式</span>
+              <div class="switch-wrapper" :class="{ 'is-checked': greyMode }" @click="handleGreyModeToggle">
+                <span class="switch-core"></span>
+              </div>
+            </div>
+            <div class="settings-switch-item">
+              <span>暗黑模式</span>
+              <div class="switch-wrapper" :class="{ 'is-checked': appStore.isDark }" @click="handleDarkModeToggle">
+                <span class="switch-core"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  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;
+    align-items: center;
+    gap: 15px;
+  }
+
+  &__collapse {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--color-text-regular);
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+
+  &__breadcrumb {
+    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;
+    }
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__search {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: var(--color-fill-light);
+    border-radius: var(--border-radius-base);
+    padding: 0 12px;
+    height: 32px;
+    width: 200px;
+
+    &-icon {
+      color: var(--color-text-secondary);
+    }
+
+    &-input {
+      flex: 1;
+      height: 100%;
+      font-size: 14px;
+      color: var(--color-text-primary);
+      background: transparent;
+      border: none;
+      outline: none;
+      padding-left: 8px;
+
+      &::placeholder {
+        color: var(--color-text-placeholder);
+      }
+    }
+
+    &-dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 0;
+      min-width: 200px;
+      max-height: 300px;
+      overflow-y: auto;
+      background-color: var(--bg-color);
+      border-radius: var(--border-radius-base);
+      box-shadow: var(--box-shadow);
+      z-index: 100;
+    }
+
+    &-results {
+      padding: 8px 0;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: var(--color-fill);
+      }
+
+      &-title {
+        font-size: 14px;
+        color: var(--color-text-primary);
+      }
+
+      &-parent {
+        font-size: 12px;
+        color: var(--color-text-secondary);
+        margin-left: auto;
+      }
+    }
+
+    &-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    &-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;
+    }
+
+    &-empty {
+      padding: 16px 12px;
+      text-align: center;
+      color: var(--color-text-secondary);
+      font-size: 14px;
+    }
+  }
+
+  &__action {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: var(--border-radius-base);
+    color: var(--color-text-regular);
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: var(--color-fill);
+      color: var(--color-primary);
+    }
+  }
+
+  &__user {
+    position: relative;
+    margin-left: 8px;
+
+    &-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);
+      max-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-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);
+        }
+      }
+    }
+  }
+}
+
+// 设置抽屉内容
+.settings-drawer {
+  .settings-section {
+    margin-bottom: 24px;
+  }
+
+  .settings-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    margin-bottom: 12px;
+  }
+
+  .settings-layout-options {
+    display: flex;
+    gap: 12px;
+  }
+
+  .layout-option {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 12px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--border-radius-base);
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: var(--color-primary-light-5);
+    }
+
+    &.is-active {
+      border-color: var(--color-primary);
+      background-color: var(--color-primary-light-9);
+    }
+
+    &__preview {
+      width: 48px;
+      height: 36px;
+      border: 1px solid var(--color-border-light);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+
+    &__label {
+      font-size: 12px;
+      color: var(--color-text-regular);
+    }
+  }
+
+  // 布局预览样式
+  .layout-preview-sidebar {
+    display: flex;
+    height: 100%;
+
+    .preview-aside {
+      width: 25%;
+      height: 100%;
+      background-color: var(--color-primary-light-7);
+    }
+
+    .preview-main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .preview-header {
+        height: 20%;
+        background-color: var(--color-border-light);
+      }
+
+      .preview-content {
+        flex: 1;
+        background-color: var(--bg-color-page);
+      }
+    }
+  }
+
+  .layout-preview-top {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .preview-header-full {
+      height: 25%;
+      background-color: var(--color-primary-light-7);
+    }
+
+    .preview-content-full {
+      flex: 1;
+      background-color: var(--bg-color-page);
+    }
+  }
+
+  .layout-preview-mix {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .preview-header-mix {
+      height: 25%;
+      background-color: var(--color-primary-light-7);
+      display: flex;
+
+      .preview-mix-left {
+        width: 30%;
+        background-color: var(--color-primary);
+      }
+    }
+
+    .preview-mix-body {
+      flex: 1;
+      display: flex;
+
+      .preview-mix-aside {
+        width: 25%;
+        background-color: var(--color-primary-light-8);
+      }
+
+      .preview-mix-content {
+        flex: 1;
+        background-color: var(--bg-color-page);
+      }
+    }
+  }
+
+  .settings-color-options {
+    display: flex;
+    gap: 12px;
+  }
+
+  .color-option {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+
+    &.is-active {
+      box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--color-primary);
+    }
+  }
+
+  .settings-switch-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .settings-switch-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    span {
+      font-size: 14px;
+      color: var(--color-text-regular);
+    }
+  }
+
+  .switch-wrapper {
+    width: 44px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .switch-core {
+      width: 100%;
+      height: 100%;
+      border-radius: 11px;
+      background-color: var(--color-border);
+      position: relative;
+      transition: background-color 0.2s;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 18px;
+        height: 18px;
+        background-color: #fff;
+        border-radius: 50%;
+        transition: left 0.2s;
+      }
+    }
+
+    &.is-checked {
+      .switch-core {
+        background-color: var(--color-primary);
+
+        &::after {
+          left: 24px;
+        }
+      }
+    }
+  }
+}
+
+// 下拉动画
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+// 搜索下拉动画
+.search-dropdown-enter-active,
+.search-dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.search-dropdown-enter-from,
+.search-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
 </style>