first commit

2026-09-21 19:21:35 +08:00
commit 6c944c4ffd
2733 changed files with 296956 additions and 0 deletions
@@ -0,0 +1,182 @@
+<template>
+  <div class="navbar">
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+
+    <div class="right-menu">
+      <!-- 任意页面都能一键看"当前这个页面"的操作记录 -->
+      <div
+        v-if="showOperLog"
+        v-hasPermi="['monitor:operlog:query']"
+        class="right-menu-item operlog-entry"
+        @click="goOperationLog"
+      >
+        <i class="el-icon-document" />
+        <span class="operlog-text">操作日志</span>
+      </div>
+      <el-dropdown class="avatar-container right-menu-item" trigger="click">
+        <div class="avatar-wrapper">
+          <img :src="avatar" class="user-avatar">
+          <span class="user-name">{{ name }}</span>
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <router-link to="/user/profile">
+            <el-dropdown-item>个人中心</el-dropdown-item>
+          </router-link>
+          <el-dropdown-item divided @click.native="logout">
+            <span>退出登录</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import TopNav from '@/components/TopNav'
+
+export default {
+  components: {
+    Breadcrumb,
+    TopNav
+  },
+  computed: {
+    ...mapGetters([
+      'avatar',
+      'name'
+    ]),
+    topNav: {
+      get() {
+        return this.$store.state.settings.topNav
+      }
+    },
+    /** 已经在操作日志页时不显示入口 */
+    showOperLog() {
+      return this.$route.path !== '/system/log/operlog'
+    }
+  },
+  methods: {
+    /** 跳到操作日志，并自动按当前页面的菜单名筛选 */
+    goOperationLog() {
+      const pageTitle = (this.$route.meta && this.$route.meta.title) || ''
+      this.$router.push({
+        path: '/system/log/operlog',
+        query: pageTitle ? { title: pageTitle } : {}
+      })
+    },
+    async logout() {
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('LogOut').then(() => {
+          location.href = '/#/login';
+        })
+      }).catch(() => {});
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 58px;
+  overflow: hidden;
+  position: relative;
+  background: rgba(255, 255, 255, 0.86);
+  backdrop-filter: blur(14px) saturate(145%);
+  -webkit-backdrop-filter: blur(14px) saturate(145%);
+  box-shadow: 0 6px 22px rgba(47, 107, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.72);
+  border-radius: 14px;
+  margin: 6px 10px 6px 0;
+  padding-left: 16px;
+
+  /* 顶栏不再放置收起按钮/装饰图标，面包屑直接从左侧留白开始 */
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .topmenu-container {
+    position: absolute;
+    left: 16px;
+  }
+
+  .errLog-container {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 58px;
+    padding-right: 18px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a6478;
+      vertical-align: text-bottom;
+    }
+
+    /* 操作日志入口：文案按钮，比图标更好找 */
+    .operlog-entry {
+      cursor: pointer;
+      font-size: 14px;
+      transition: color 0.2s;
+
+      .operlog-text {
+        margin-left: 4px;
+      }
+
+      &:hover {
+        color: #2f6bff;
+      }
+    }
+
+    .avatar-container {
+      cursor: pointer;
+
+      .avatar-wrapper {
+        display: flex;
+        align-items: center;
+        height: 58px;
+
+        .user-avatar {
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          flex-shrink: 0;
+        }
+
+        .user-name {
+          margin: 0 6px 0 8px;
+          font-size: 14px;
+          font-weight: 600;
+          color: #263654;
+          max-width: 120px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .el-icon-caret-bottom {
+          font-size: 12px;
+          color: #98a3b7;
+        }
+      }
+    }
+  }
+}
+</style>