前后端全面升级

cmdb-ui/src/components/tools/UserMenu.vue

@@ -1,81 +1,103 @@
 <template>
   <div class="user-wrapper">
     <div class="content-box">
-      <a href="https://github.com/pycook/cmdb" target="_blank">
-        <span class="action">
-          {{ $t('tip.sourceCode') }} -> <a-icon type="github" style="font-size: 20px; color: #002140"></a-icon>
-        </span>
-      </a>
-      <!-- <a href="https://pro.loacg.com/docs/getting-started" target="_blank">
-        <span class="action">
-          <a-icon type="question-circle-o"></a-icon>
-        </span>
-      </a>
-      <notice-icon class="action"/> -->
-      <a-dropdown>
+      <!-- <document-link /> -->
+      <span
+        v-if="hasBackendPermission"
+        @click="handleClick"
+        class="action"
+        style="width: 40px; display: flex; justify-content: center"
+      >
+        <a-icon type="setting" />
+      </span>
+      <a-popover
+        trigger="click"
+        :overlayStyle="{ width: '120px' }"
+        placement="bottomRight"
+        overlayClassName="custom-user"
+      >
+        <template slot="content">
+          <router-link :to="{ name: 'setting_person' }" :style="{ color: '#000000a6' }">
+            <div class="custom-user-item">
+              <a-icon type="user" :style="{ marginRight: '10px' }" />
+              <span>个人中心</span>
+            </div>
+          </router-link>
+          <div @click="handleLogout" class="custom-user-item">
+            <a-icon type="logout" :style="{ marginRight: '10px' }" />
+            <span>退出登录</span>
+          </div>
+        </template>
         <span class="action ant-dropdown-link user-dropdown-menu">
-          <a-avatar class="avatar" size="small" :src="avatar()"/>
+          <a-avatar
+            v-if="avatar()"
+            class="avatar"
+            size="small"
+            :src="avatar().startsWith('https') ? avatar() : `/api/common-setting/v1/file/${avatar()}`"
+          />
+          <a-avatar v-else class="avatar" size="small" icon="user" />
           <span>{{ nickname() }}</span>
         </span>
-        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
-          <!-- <a-menu-item key="0">
-            <router-link :to="{ name: 'center' }">
-              <a-icon type="user"/>
-              <span>个人中心</span>
-            </router-link>
-          </a-menu-item>
-          <a-menu-item key="1">
-            <router-link :to="{ name: 'settings' }">
-              <a-icon type="setting"/>
-              <span>账户设置</span>
-            </router-link>
-          </a-menu-item>
-          <a-menu-divider/> -->
-          <a-menu-item key="3">
-            <a href="javascript:;" @click="handleLogout">
-              <a-icon type="logout"/>
-              <span>{{ $t('login.logout') }}</span>
-            </a>
-          </a-menu-item>
-        </a-menu>
-      </a-dropdown>
-      <lang-select v-if="showLocale" />
+      </a-popover>
     </div>
   </div>
 </template>
 
 <script>
-import NoticeIcon from '@/components/NoticeIcon'
-import { mapActions, mapGetters } from 'vuex'
-import LangSelect from '@/components/tools/LangSelect'
-import config from '@/config/defaultSettings'
+import DocumentLink from './DocumentLink.vue'
+import { mapState, mapActions, mapGetters } from 'vuex'
 
 export default {
   name: 'UserMenu',
   components: {
-    NoticeIcon, LangSelect
+    DocumentLink,
   },
-  data () {
-    return {
-      showLocale: config.showLocale
-    }
+  computed: {
+    ...mapState(['user']),
+    hasBackendPermission() {
+      return this.user?.roles?.permissions.includes('acl_admin', 'backend_admin') || false
+    },
   },
   methods: {
     ...mapActions(['Logout']),
     ...mapGetters(['nickname', 'avatar']),
-    handleLogout () {
+    handleLogout() {
       const that = this
 
       this.$confirm({
-        title: this.$t('tip.warning'),
-        content: this.$t('login.confirmLogout'),
-        onOk () {
+        title: '提示',
+        content: '真的要注销登录吗 ?',
+        onOk() {
+          // localStorage.removeItem('ops_cityps_currentId')
+          localStorage.clear()
           return that.Logout()
         },
-        onCancel () {
-        }
+        onCancel() {},
       })
-    }
-  }
+    },
+    handleClick() {
+      this.$router.push('/setting')
+    },
+  },
 }
 </script>
+<style lang="less">
+@import '~@/style/static.less';
+.color {
+  color: #custom_colors[color_1];
+  background-color: #custom_colors[color_2];
+}
+.custom-user {
+  .custom-user-item {
+    cursor: pointer;
+    padding: 5px 10px;
+    &:hover {
+      .color() !important;
+    }
+  }
+  .ant-popover-inner-content {
+    padding: 0;
+    color: #000000a6;
+  }
+}
+</style>