代码修改

ruoyi-ui/src/layout/components/Navbar.vue

@@ -1,41 +1,49 @@
 <template>
-  <div class="navbar fixed-header">
+  <div class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
     <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
     <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
 
+    <div v-if="licenseWarning" class="license-warning">
+      <i class="el-icon-warning-outline" />
+      系统授权将于 {{ licenseExpireText }} 后过期，请及时联系管理员续期
+    </div>
+
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
 
+        <el-tooltip content="联系我们" effect="dark" placement="bottom">
+          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <el-tooltip :content="$t('top.layOut')" effect="dark" placement="bottom">
+        <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
 
       </template>
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
+      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar">
-          <span class="user-nickname"> {{ nickName }} </span>
+          <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/user/profile">
-            <el-dropdown-item>{{ $t('top.personalCenter') }}</el-dropdown-item>
+            <el-dropdown-item>个人中心</el-dropdown-item>
           </router-link>
+          <el-dropdown-item @click.native="setting = true">
+            <span>布局设置</span>
+          </el-dropdown-item>
           <el-dropdown-item divided @click.native="logout">
-            <span>{{ $t('top.loginOut') }}</span>
+            <span>退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
-
-      <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="setting">
-        <svg-icon icon-class="more-up" />
-      </div>
     </div>
   </div>
 </template>
@@ -48,11 +56,11 @@ import Hamburger from '@/components/Hamburger'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
-// import RuoYiGit from '@/components/RuoYi/Git'
-// import RuoYiDoc from '@/components/RuoYi/Doc'
+import RuoYiGit from '@/components/RuoYi/Git'
+import RuoYiDoc from '@/components/RuoYi/Doc'
+import { getLicenseInfo } from '@/api/license'
 
 export default {
-  emits: ['setLayout'],
   components: {
     Breadcrumb,
     TopNav,
@@ -60,19 +68,31 @@ export default {
     Screenfull,
     SizeSelect,
     Search,
-    // RuoYiGit,
-    // RuoYiDoc
+    RuoYiGit,
+    RuoYiDoc
+  },
+  data() {
+    return {
+      licenseWarning: false,
+      licenseExpireText: '',
+      licenseTimer: null
+    }
   },
   computed: {
     ...mapGetters([
       'sidebar',
       'avatar',
-      'device',
-      'nickName'
+      'device'
     ]),
     setting: {
       get() {
         return this.$store.state.settings.showSettings
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'showSettings',
+          value: val
+        })
       }
     },
     topNav: {
@@ -81,17 +101,49 @@ export default {
       }
     }
   },
+  mounted() {
+    this.checkLicenseExpire()
+    this.licenseTimer = setInterval(() => this.checkLicenseExpire(), 60 * 1000)
+  },
+  beforeDestroy() {
+    if (this.licenseTimer) {
+      clearInterval(this.licenseTimer)
+    }
+  },
   methods: {
+    checkLicenseExpire() {
+      getLicenseInfo().then(res => {
+        if (res.code === 200 && res.data && res.data.expireTime) {
+          const expireTime = new Date(res.data.expireTime).getTime()
+          const now = Date.now()
+          const diffMs = expireTime - now
+          const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
+          if (diffMs > 0 && diffDays <= 30) {
+            this.licenseWarning = true
+            if (diffMs < 1000 * 60 * 60 * 24) {
+              const hours = Math.floor(diffMs / (1000 * 60 * 60))
+              const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60))
+              if (hours > 0) {
+                this.licenseExpireText = hours + ' 小时 ' + minutes + ' 分钟'
+              } else {
+                this.licenseExpireText = minutes + ' 分钟'
+              }
+            } else if (diffDays < 7) {
+              this.licenseExpireText = diffDays + ' 天'
+            } else {
+              this.licenseExpireText = Math.ceil(diffDays / 7) + ' 周'
+            }
+          }
+        }
+      }).catch(() => {})
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
-    setLayout(event) {
-      this.$emit('setLayout')
-    },
     logout() {
-      this.$confirm(this.$t('top.logoutTip'), this.$t('top.logoutTitle'), {
-        confirmButtonText: this.$t('top.confirm') ,
-        cancelButtonText: this.$t('top.cancel') ,
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         this.$store.dispatch('LogOut').then(() => {
@@ -104,15 +156,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// 导航栏高度，可以通过公式 44+8n 进行调整
 .navbar {
-  height: 44px;
+  height: 50px;
   overflow: hidden;
   position: relative;
-  background: var(--navbar-background, #fff);
-  color: var(--navbar-color, #5a5e66);
+  background: #1896fc;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
-
+  .license-warning {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 0;
+    height: 50px;
+    line-height: 50px;
+    font-size: 13px;
+    color: #e6a23c;
+    font-weight: 500;
+    pointer-events: none;
+    i { margin-right: 4px; }
+  }
   .hamburger-container {
     line-height: 46px;
     height: 100%;
@@ -143,7 +205,7 @@ export default {
   .right-menu {
     float: right;
     height: 100%;
-    line-height: 44px;
+    line-height: 50px;
 
     &:focus {
       outline: none;
@@ -154,7 +216,7 @@ export default {
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: inherit;
+      color: #5a5e66;
       vertical-align: text-bottom;
 
       &.hover-effect {
@@ -168,25 +230,17 @@ export default {
     }
 
     .avatar-container {
-      margin-right: 0px;
-      padding-right: 0px;
+      margin-right: 30px;
 
       .avatar-wrapper {
-        margin-top: 10px;
+        margin-top: 5px;
         position: relative;
 
         .user-avatar {
           cursor: pointer;
-          width: 30px;
-          height: 30px;
-          border-radius: 50%;
-        }
-
-        .user-nickname{
-          position: relative;
-          bottom: 10px;
-          font-size: 14px;
-          font-weight: bold;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
         }
 
         .el-icon-caret-bottom {
@@ -201,3 +255,4 @@ export default {
   }
 }
 </style>
+