mod:新增用户信息显示，加退出

frontend/src/components/header-bar/index.vue

@@ -9,13 +9,21 @@
     <div class="header-bar__title">
       <span class="header-bar__text">{{ title }}</span>
     </div>
-    <div class="header-bar__buttons">
-<!--      <div class="header-bar__button" @click="minimizeWindow">
-        <img :src="iconMinimize" class="header-bar__button-icon" />
+    <div class="header-bar__buttons" >
+      <div class="header-bar__button header-bar__button__user" v-if="showUser">
+
+
+        <el-dropdown>
+          <span class="el-dropdown-link">
+           {{useUserInfoStore.userInfo.account_name || useUserInfoStore.userInfo.real_name || useUserInfoStore.userInfo.login_name}}
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </div>
-      <div class="header-bar__button" @click="closeWindow">
-        <img :src="iconClose" class="header-bar__button-icon" />
-      </div>-->
     </div>
   </div>
   <div class="header-bar_blank"></div>
@@ -23,6 +31,7 @@
 
 <script setup lang="ts">
 import { defineProps, reactive } from 'vue';
+import useUserInfo from "@/stores/modules/user";
 import { useRouter} from "vue-router";
 import iconsz from './assets/shezhi@2x.png'
 import iconykq from './assets/yaokong@2x.png'
@@ -32,6 +41,7 @@ import icpList from '@/utils/ipc'
 import { getRouterUrl } from '@/utils/appfun'
 import client from "@/stores/modules/client";
 const clientStore = client();
+const useUserInfoStore = useUserInfo();
 
 // 定义 menu 项的类型
 interface MenuItem {
@@ -50,6 +60,10 @@ const props = defineProps({
   menu: {
     type: Array as () => MenuItem[],
     default: () => []
+  },
+  showUser:{
+    type: Boolean,
+    default: false
   }
 });
 const Router = useRouter()
@@ -104,6 +118,11 @@ function openSetting() {
   clientStore.ipc.send(icpList.utils.openMain, params);
 }
 
+function loginOut(){
+  useUserInfoStore.loginOut();
+  useUserInfoStore.updateLoginShow(true)
+}
+
 // 新增
 function minimizeWindow() {
   clientStore.ipc.send(icpList.utils.minimizeWindow);
@@ -196,7 +215,7 @@ function closeWindow() {
 }
 
 .header-bar__button {
-  width: 30px;
+  min-width: 30px;
   height: 30px;
   border: none;
   cursor: pointer;
@@ -205,6 +224,9 @@ function closeWindow() {
   justify-content: center;
 }
 
+.header-bar__button__user {
+  padding: 0 10px;
+}
 .header-bar__button:hover {
   background-color: #e0e0e0;
 }

frontend/src/stores/modules/user.ts

@@ -52,7 +52,7 @@ export const useUserInfo = defineStore('userInfo', () => {
     try {
       const res = await login(data); // 调用登录接口
       await updateToken(res.data.token); // 更新登录令牌
-   //   await getInfo(); // 获取用户信息
+      //   await getInfo(); // 获取用户信息
       return res;
     } catch (error) {
       console.error('登录失败:', error);
@@ -60,6 +60,25 @@ export const useUserInfo = defineStore('userInfo', () => {
     }
   };
 
+
+
+  /**
+   * 执行用户登录操作。
+   *
+   * @param {any} data - 登录所需的用户凭据。
+   * @returns {Promise<any>} 登录接口返回的结果。
+   * @throws {Error} 如果登录失败，抛出错误。
+   */
+  const loginOut = async (data: any) => {
+    try {
+      await updateToken(''); // 更新登录令牌
+      await updateUserInfo({})
+    } catch (error) {
+      console.error('登录失败:', error);
+      throw error;
+    }
+  };
+
   /**
    * 获取用户信息并更新状态。
    *
@@ -88,6 +107,7 @@ export const useUserInfo = defineStore('userInfo', () => {
     updateUserInfo,
     updateLoginShow,
     loginAction,
+    loginOut,
     getInfo,
   };
 });

frontend/src/views/Photography/check.vue

@@ -3,6 +3,7 @@
   <headerBar
       title="拍摄物体镜头矫正"
       :menu="menu"
+      showUser
   />
   <div class="check-wrap flex">
 

frontend/src/views/Photography/shot.vue

@@ -2,6 +2,7 @@
 
   <headerBar
       title="拍摄商品"
+      showUser
       :menu="[
         {
           type:'setting'