fix: permission (#3325)

Author: shaohuzhang1

ui/src/layout/layout-header/avatar/index.vue

@@ -2,11 +2,11 @@
   <el-dropdown trigger="click" type="primary">
     <div class="flex-center cursor">
       <el-avatar :size="30">
-        <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
+        <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
       </el-avatar>
       <span class="ml-8 color-text-primary">{{ user.userInfo?.username }}</span>
       <el-icon class="el-icon--right">
-        <CaretBottom/>
+        <CaretBottom />
       </el-icon>
     </div>
 
@@ -15,23 +15,27 @@
         <div class="userInfo flex align-center">
           <div class="mr-12 flex align-center">
             <el-avatar :size="30">
-              <img src="@/assets/user-icon.svg" style="width: 54%" alt=""/>
+              <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
             </el-avatar>
           </div>
           <div style="width: 90%">
             <p class="bold mb-4" style="font-size: 14px">{{ user.userInfo?.username }}</p>
             <template v-if="user.userInfo?.role && user.userInfo.role.length > 0">
               <el-tag size="small" class="default-tag">{{ user.userInfo?.role[0] }}</el-tag>
               <el-tag size="small" class="default-tag ml-4" v-if="user.userInfo?.role?.length > 1"
-              >+{{ user.userInfo?.role?.length - 1 }}
+                >+{{ user.userInfo?.role?.length - 1 }}
               </el-tag>
             </template>
           </div>
         </div>
         <el-dropdown-item class="border-t p-8" @click="openResetPassword">
           {{ $t('views.login.resetPassword') }}
         </el-dropdown-item>
-        <div v-hasPermission="new ComplexPermission([], ['x-pack'], 'OR')">
+        <div
+          v-hasPermission="
+            new ComplexPermission([], [], [EditionConst.IS_EE, EditionConst.IS_PE], 'OR')
+          "
+        >
           <el-dropdown-item class="p-8" @click="openAPIKeyDialog">
             {{ $t('layout.apiKey') }}
           </el-dropdown-item>
@@ -41,7 +45,7 @@
             <div class="flex-between w-full" style="line-height: 22px; padding: 12px 11px">
               <span> {{ $t('layout.language') }}</span>
               <el-icon>
-                <ArrowRight/>
+                <ArrowRight />
               </el-icon>
             </div>
 
@@ -55,14 +59,14 @@
                   class="flex-between"
                 >
                   <span :class="lang.value === user.userInfo?.language ? 'primary' : ''">{{
-                      lang.label
-                    }}</span>
+                    lang.label
+                  }}</span>
 
                   <el-icon
                     :class="lang.value === user.userInfo?.language ? 'primary' : ''"
                     v-if="lang.value === user.userInfo?.language"
                   >
-                    <Check/>
+                    <Check />
                   </el-icon>
                 </el-dropdown-item>
               </el-dropdown-menu>
@@ -86,24 +90,25 @@
       </el-dropdown-menu>
     </template>
   </el-dropdown>
-  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef"/>
+  <APIKeyDialog :user-id="user.userInfo?.id" ref="APIKeyDialogRef" />
   <ResetPassword ref="resetPasswordRef"></ResetPassword>
   <AboutDialog ref="AboutDialogRef"></AboutDialog>
 
   <!-- <UserPwdDialog ref="UserPwdDialogRef" /> -->
 </template>
 <script setup lang="ts">
-import {ref, onMounted} from 'vue'
+import { ref, onMounted } from 'vue'
 import useStore from '@/stores'
-import {useRouter} from 'vue-router'
+import { useRouter } from 'vue-router'
 import ResetPassword from './ResetPassword.vue'
 import AboutDialog from './AboutDialog.vue'
 // import UserPwdDialog from '@/views/user-manage/component/UserPwdDialog.vue'
 import APIKeyDialog from './APIKeyDialog.vue'
-import {ComplexPermission} from '@/utils/permission/type'
-import {langList} from '@/locales/index'
+import { ComplexPermission } from '@/utils/permission/type'
+import { langList } from '@/locales/index'
+import { EditionConst } from '@/utils/permission/data'
 
-const {user, login} = useStore()
+const { user, login } = useStore()
 const router = useRouter()
 
 const AboutDialogRef = ref()
@@ -129,7 +134,7 @@ const openResetPassword = () => {
 
 const logout = () => {
   login.logout().then(() => {
-    router.push({name: 'login'})
+    router.push({ name: 'login' })
   })
 }