feat: 新增新版本提示

src/layout/components/Navbar.vue

@@ -17,6 +17,7 @@
       </app-link>
       <div class="right-username">{{showName}}</div>
       <div class="right-menu">
+        <el-badge v-if="newVersion" value="new" class="new-version"/>
         <el-dropdown class="avatar-container" trigger="click">
           <div class="avatar-wrapper">
             <el-avatar :src="avatar ? imageUrl + avatar : defaultAvatar" icon="el-icon-user-solid"></el-avatar>
@@ -29,6 +30,7 @@
               :to="resolvePath(route.path)"
             >
               <el-dropdown-item>
+                <el-badge v-if="route.path === '/setting/user' && newVersion" is-dot class="new-version-dot"/>
                 <svg-icon :icon-class="route.children[0].meta.icon"></svg-icon>
                 {{route.children[0].name}}
               </el-dropdown-item>
@@ -39,7 +41,6 @@
           </el-dropdown-menu>
         </el-dropdown>
       </div>
-
     </div>
 
   </div>
@@ -51,7 +52,6 @@ import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 import Icon from '@/components/Icon/Icon.vue'
 import AppLink from './Sidebar/Link'
-import store from "@/store"
 import {isExternal} from "@/utils/validate";
 import path from "path";
 
@@ -74,7 +74,8 @@ export default {
     ...mapGetters([
       'sidebar',
       'avatar',
-      'showName'
+      'showName',
+      'newVersion'
     ]),
     routes() {
       let routes = {}
@@ -120,6 +121,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.new-version {
+  position: absolute;
+  right: 0;
+  top: 5px;
+}
+.new-version-dot {
+  position: absolute;
+  right: 10px;
+  top: 5px;
+}
 .navbar {
   height: 50px;
   overflow: hidden;

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,12 +3,10 @@
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <el-badge value="new" v-if="item.path === '/setting/cloudManager' && newVersion" class="new-version"/>
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title"/>
         </el-menu-item>
       </app-link>
-<!--      <el-menu-item v-if="onlyOneChild.path === '/setting/manager-users'">-->
-<!--        <item title="sdf"/>-->
-<!--      </el-menu-item>-->
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
@@ -28,6 +26,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import path from 'path'
 import { isExternal } from '@/utils/validate'
 import Item from './Item'
@@ -57,6 +56,11 @@ export default {
     this.onlyOneChild = null
     return {}
   },
+  computed: {
+    ...mapGetters([
+      'newVersion'
+    ]),
+  },
   methods: {
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter(item => {
@@ -94,3 +98,11 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+.new-version {
+  float: right;
+  >>>.el-badge__content {
+    line-height: 16px;
+  }
+}
+</style>

src/store/getters.js

@@ -6,6 +6,7 @@ const getters = {
   avatar: state => state.user.avatar,
   name: state => state.user.name,
   showName: state => state.user.showName,
+  newVersion: state => state.user.newVersion,
   userId: state => state.user.userId,
   userInfo: state => state.user.userInfo,
   menuList: state => state.user.menuList,

src/store/modules/user.js

@@ -35,6 +35,7 @@ const getDefaultState = () => {
     menuList: [],
     netdiskName: '',
     netdiskLogo: '',
+    newVersion: ''
   }
 }
 
@@ -73,6 +74,9 @@ const mutations = {
   },
   SET_NETDISK_LOGO:(state,netdiskLogo) => {
     state.netdiskLogo = netdiskLogo;
+  },
+  SET_NEW_VERSION:(state,newVersion) => {
+    state.newVersion = newVersion;
   }
 }
 
@@ -148,7 +152,7 @@ const actions = {
           // reject('Verification failed, please Login again.')
         }
 
-        const { id, username, showName, avatar, netdiskName, netdiskLogo} = data
+        const { id, username, showName, avatar, netdiskName, netdiskLogo, newVersion} = data
 
         commit('SET_NAME', username)
         commit('SET_SHOW_NAME', showName)
@@ -157,6 +161,11 @@ const actions = {
         commit('SET_USER_INFO', data)
         commit('SET_NETDISK_NAME', netdiskName)
         commit('SET_NETDISK_LOGO', netdiskLogo)
+        if (newVersion) {
+          commit('SET_NEW_VERSION', newVersion)
+        } else {
+          commit('SET_NEW_VERSION', '')
+        }
         setLogo(netdiskName, netdiskLogo)
         sessionStorage.setItem('store', JSON.stringify(state))
         resolve(data)

src/views/setting/cloudManager.vue

@@ -43,7 +43,7 @@
           将图片转换为webp格式存储，在不降低图片质量的情况下，极大降低图片文件的体积，建议开启.
           <a href="https://baike.baidu.com/item/webp%E6%A0%BC%E5%BC%8F" target="_blank">什么是webp?</a>
           </span>
-              <div class="config-itme-label">网盘同步：
+              <div class="config-itme-label">重建索引：
                 <el-button class="sync-button" size="mini" :loading="syncLoading" type="primary" @click="sync()"><i
                   class="el-icon-refresh"></i>
                 </el-button>
@@ -56,6 +56,14 @@
                   <i class="el-icon-refresh-left"></i></el-button>
               </div>
               <span class="instruction">一般用于初始化角色、菜单数据</span>
+
+              <div class="config-itme-label">当前版本：v{{currentVersion}}
+                <el-badge v-if="newVersion" value="new" class="item"/>
+              </div>
+              <span class="instruction">最新版本：{{newVersion ? newVersion : 'v' + currentVersion}}
+                <a href="https://github.com/jamebal/jmal-cloud-view/releases" target="_blank">在github上更新</a>
+              </span>
+
             </div>
           </el-tab-pane>
           <el-tab-pane label="LDAP认证" name="2" class="setting-tab-panel">
@@ -122,6 +130,7 @@
 
 <script>
 
+import config from '@/../package.json'
 import settingApi, {getSetting} from "@/api/setting-api";
 import Bus from "@/assets/js/bus";
 import Logo from "@/components/Logo";
@@ -129,6 +138,7 @@ import getPageTitle from "@/utils/get-page-title";
 import UploadImageInput from "@/components/input/UploadImageInput.vue";
 import roleApi from "@/api/role";
 import { loadLdapConfig, testLdapConfig, updateLdapConfig} from '@/api/user'
+import {mapGetters} from "vuex";
 
 export default {
   components: {UploadImageInput, Logo},
@@ -155,6 +165,7 @@ export default {
         password: '',
         loginName: ''
       },
+      currentVersion: config.version,
       roleList: [],
       ldapStatusOptions: [{
         value: true,
@@ -207,6 +218,9 @@ export default {
     Bus.$off()
   },
   computed: {
+    ...mapGetters([
+      'newVersion'
+    ]),
     ldapTestBtn() {
       return !(this.ldapFormData.ldapServer.length > 0 && this.ldapFormData.baseDN.length > 0 && (this.ldapFormData.password ? this.ldapFormData.password.length > 0 : false))
     },

src/websocket/sockJS.js

@@ -45,14 +45,14 @@ function connect(username,token){
               title: `${doc.operation}成功`,
               dangerouslyUseHTMLString: true,
               message: `
-<div>
-  <p>form:</p>
-  <pre style="word-break: break-all;white-space: pre-wrap;font-size: 12px;">${doc.from}</pre>
-</div>
-<div>
-  <p>to:</p>
-  <pre style="word-break: break-all;white-space: pre-wrap;font-size: 12px;">${doc.to}</pre>
-</div>`,
+                <div>
+                  <p>form:</p>
+                  <pre style="word-break: break-all;white-space: pre-wrap;font-size: 12px;">${doc.from}</pre>
+                </div>
+                <div>
+                  <p>to:</p>
+                  <pre style="word-break: break-all;white-space: pre-wrap;font-size: 12px;">${doc.to}</pre>
+                </div>`,
               type: 'success',
             });
           } else {