xto-fronted 0.4.20 → 0.4.21

package/src/components/Layout/TopMenu.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useMenuStore } from '@/stores/menu'
 import { useAppStore } from '@/stores/app'
+import { useUserStore } from '@/stores/user'
+import { useAuthStore } from '@/stores/auth'
 import { Menu, MenuItem, SubMenu } from '@xto/navigation'
 import { Icon } from '@xto/base'
+import { Drawer } from '@xto/feedback'
 
 const route = useRoute()
 const router = useRouter()
 const menuStore = useMenuStore()
 const appStore = useAppStore()
+const userStore = useUserStore()
+const authStore = useAuthStore()
 
 const activeMenu = computed(() => route.path)
 
@@ -18,6 +23,13 @@ const menuBgColor = computed(() => appStore.isDark ? '#1d1e1f' : '#fff')
 const menuTextColor = computed(() => appStore.isDark ? '#cfd3dc' : '#303133')
 const menuActiveTextColor = computed(() => '#409eff')
 
+// 下拉菜单
+const dropdownVisible = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
+const isFullscreen = ref(false)
+const drawerVisible = ref(false)
+const greyMode = ref(false)
+
 // 菜单选择
 const handleMenuSelect = (index: string) => {
   if (index && index !== route.path) {
@@ -99,10 +111,140 @@ const getFirstChar = (name?: string): string => {
 const iconExists = (iconName: string): boolean => {
   return knownIcons.has(iconName)
 }
+
+// 切换主题
+const toggleTheme = () => {
+  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 openSettingsDrawer = () => {
+  drawerVisible.value = true
+}
+
+// 切换灰色模式
+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
+}
+
+// 布局模式选项
+type LayoutMode = 'sidebar' | 'top' | 'mix'
+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 currentLayout = computed(() => appStore.layout)
+
+// 切换布局模式
+const handleLayoutChange = (mode: LayoutMode) => {
+  appStore.setLayout(mode)
+  drawerVisible.value = false
+}
+
+// 主题色选项
+const colorOptions = [
+  { value: '#409eff', label: '默认蓝' },
+  { value: '#1890ff', label: '科技蓝' },
+  { value: '#52c41a', label: '极光绿' },
+  { value: '#faad14', label: '日落橙' },
+  { value: '#f5222d', label: '薄暮红' },
+  { value: '#722ed1', label: '酱紫' }
+]
+
+// 设置主题色
+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('/login')
+}
+
+// 点击外部关闭下拉菜单
+const handleClickOutside = (event: MouseEvent) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    closeDropdowns()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  greyMode.value = document.documentElement.classList.contains('grey-mode')
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+})
 </script>
 
 <template>
   <div class="top-menu">
+    <!-- 左侧菜单 -->
     <Menu
       :default-active="activeMenu"
       mode="horizontal"
@@ -144,6 +286,149 @@ const iconExists = (iconName: string): boolean => {
         </MenuItem>
       </template>
     </Menu>
+
+    <!-- 右侧操作区域 -->
+    <div class="top-menu__actions">
+      <!-- 全屏切换 -->
+      <div class="top-menu__action" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
+        <Icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" :size="16" />
+      </div>
+
+      <!-- 换肤设置 -->
+      <div class="top-menu__action" @click="openSettingsDrawer" title="换肤设置">
+        <Icon name="skin" :size="16" />
+      </div>
+
+      <!-- 主题切换 -->
+      <div class="top-menu__action" @click="toggleTheme" title="切换主题">
+        <Icon :name="appStore.isDark ? 'sun' : 'moon'" :size="16" />
+      </div>
+
+      <!-- 用户头像 -->
+      <div class="top-menu__user" ref="dropdownRef">
+        <div class="top-menu__user-trigger" @click.stop="toggleDropdown">
+          <div class="top-menu__avatar">
+            <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
+          </div>
+          <span class="top-menu__user-name">{{ userStore.userName }}</span>
+          <span class="top-menu__user-arrow" :class="{ 'is-active': dropdownVisible }">▼</span>
+        </div>
+
+        <!-- 下拉菜单 -->
+        <Transition name="dropdown">
+          <div v-if="dropdownVisible" class="top-menu__dropdown">
+            <div class="top-menu__dropdown-header">
+              <div class="top-menu__dropdown-avatar">
+                <span>{{ userStore.userName?.charAt(0) || 'U' }}</span>
+              </div>
+              <div class="top-menu__dropdown-info">
+                <div class="top-menu__dropdown-name">{{ userStore.userName }}</div>
+                <div class="top-menu__dropdown-role">{{ userStore.departmentName }}</div>
+              </div>
+            </div>
+            <div class="top-menu__dropdown-divider"></div>
+            <div class="top-menu__dropdown-menu">
+              <div class="top-menu__dropdown-item" @click="handleProfile">
+                <Icon name="user" :size="16" />
+                <span>个人信息</span>
+              </div>
+              <div class="top-menu__dropdown-item" @click="handleChangePassword">
+                <Icon name="lock" :size="16" />
+                <span>修改密码</span>
+              </div>
+              <div class="top-menu__dropdown-divider"></div>
+              <div class="top-menu__dropdown-item top-menu__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>
 
@@ -182,5 +467,386 @@ const iconExists = (iconName: string): boolean => {
     background-color: var(--color-primary-light-8);
     border-radius: 4px;
   }
+
+  // 右侧操作区域
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__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);
 }
 </style>