fix: improve code formatting and consistency in index.vue

Author: wxg0103

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,7 +15,7 @@
         <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%">
@@ -102,7 +102,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>
 
@@ -116,14 +116,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>
@@ -143,26 +143,26 @@
       </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 { hasPermission } from '@/utils/permission'
-import { PermissionConst, RoleConst, EditionConst } from '@/utils/permission/data'
+import {ComplexPermission} from '@/utils/permission/type'
+import {langList} from '@/locales/index'
+import {hasPermission} from '@/utils/permission'
+import {PermissionConst, RoleConst, EditionConst} from '@/utils/permission/data'
 
-const { user, login } = useStore()
+const {user, login} = useStore()
 const router = useRouter()
 
 const AboutDialogRef = ref()
@@ -188,13 +188,13 @@ const openResetPassword = () => {
 
 const logout = () => {
   login.logout().then(() => {
-    router.push({ name: 'login' })
+    router.push({name: 'login'})
   })
 }
 
 onMounted(() => {
   if (user.userInfo?.is_edit_password) {
-    // UserPwdDialogRef.value.open(user.userInfo)
+    resetPasswordRef.value?.open()
   }
 })
 </script>