init

2026-10-25 23:33:42 +08:00
parent c5a6ada6a6
commit 7ec6bd789f
23 changed files with 1473 additions and 110 deletions
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+  import { ArrowDown, User } from '@element-plus/icons-vue'
+  import { useFullscreen } from '@vueuse/core'
+  import { computed } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { useAppStore, useSettingsStore, useUserStore } from '@/store'
+
+  const route = useRoute()
+  const router = useRouter()
+  const appStore = useAppStore()
+  const userStore = useUserStore()
+  const settingsStore = useSettingsStore()
+
+  const { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
+
+  /** 面包屑：取 matched 中带标题的层级 */
+  const breadcrumbs = computed(() =>
+    route.matched.filter((item) => item.meta?.title).map((item) => item.meta.title as string),
+  )
+
+  function handleThemeChange(color: string | null) {
+    if (color) {
+      settingsStore.setThemeColor(color)
+    }
+  }
+
+  async function handleCommand(command: string) {
+    if (command === 'logout') {
+      await ElMessageBox.confirm('确认退出登录吗？', '提示', { type: 'warning' })
+      await userStore.logout()
+      ElMessage.success('已退出登录')
+      void router.replace('/login')
+    }
+  }
+</script>
+
+<template>
+  <div class="navbar">
+    <div class="navbar__left">
+      <el-icon class="navbar__icon" @click="appStore.toggleSidebar()">
+        <component :is="appStore.sidebarCollapsed ? 'Expand' : 'Fold'" />
+      </el-icon>
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item v-for="(title, index) in breadcrumbs" :key="index">
+          {{ title }}
+        </el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="navbar__right">
+      <el-color-picker
+        v-model="settingsStore.themeColor"
+        size="small"
+        @change="handleThemeChange"
+      />
+      <el-icon class="navbar__icon" @click="toggleFullscreen()">
+        <component :is="isFullscreen ? 'Aim' : 'FullScreen'" />
+      </el-icon>
+      <el-dropdown trigger="click" @command="handleCommand">
+        <span class="navbar__user">
+          <el-icon><User /></el-icon>
+          <span>{{ userStore.nickname || userStore.userInfo?.username }}</span>
+          <el-icon><ArrowDown /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .navbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: $navbar-height;
+    padding: 0 16px;
+    background-color: #fff;
+    border-bottom: 1px solid $border-color-light;
+
+    &__left,
+    &__right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    &__icon {
+      font-size: 18px;
+      cursor: pointer;
+      color: $text-color-regular;
+
+      &:hover {
+        color: $color-primary;
+      }
+    }
+
+    &__user {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      cursor: pointer;
+      outline: none;
+      color: $text-color-regular;
+    }
+  }
+</style>