feat: 前端优化

frontend/hooks/web/useUserInfo.js

@@ -1,10 +1,10 @@
 /**
  * 用户信息 Hook
  * 封装获取用户信息的逻辑，可在各个应用中复用
- * 
+ *
  * 使用方式：
  * import { useUserInfo } from '@gold/hooks/web/useUserInfo'
- * 
+ *
  * const { fetchUserInfo, loading, error } = useUserInfo()
  * await fetchUserInfo()
  */
@@ -13,6 +13,10 @@ import { ref } from 'vue'
 import axios from 'axios'
 import { API_BASE } from '@gold/config/api'
 
+// 本地存储配置
+const CACHE_KEY = 'USER_INFO_CACHE'
+const CACHE_DURATION = 5 * 60 * 1000 // 5分钟缓存
+
 // 获取 token 的工具函数（需要从应用层传入或使用全局配置）
 let getTokenFn = null
 
@@ -46,6 +50,60 @@ function getAuthHeader() {
   return ''
 }
 
+/**
+ * 从本地存储获取缓存的用户信息
+ * @returns {Object|null} 缓存的用户信息或 null
+ */
+function getCachedUserInfo() {
+  try {
+    const cached = sessionStorage.getItem(CACHE_KEY)
+    if (!cached) return null
+
+    const { data, timestamp } = JSON.parse(cached)
+    const now = Date.now()
+
+    // 检查缓存是否过期
+    if (now - timestamp > CACHE_DURATION) {
+      sessionStorage.removeItem(CACHE_KEY)
+      return null
+    }
+
+    console.log('[UserInfo] 使用本地缓存')
+    return data
+  } catch (e) {
+    return null
+  }
+}
+
+/**
+ * 将用户信息存储到本地
+ * @param {Object} userInfo - 用户信息
+ */
+function setCachedUserInfo(userInfo) {
+  try {
+    const cacheData = {
+      data: userInfo,
+      timestamp: Date.now()
+    }
+    sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
+    console.log('[UserInfo] 更新本地缓存')
+  } catch (e) {
+    console.error('缓存用户信息失败:', e)
+  }
+}
+
+/**
+ * 清除用户信息缓存
+ */
+export function clearUserInfoCache() {
+  try {
+    sessionStorage.removeItem(CACHE_KEY)
+    console.log('[UserInfo] 清除缓存')
+  } catch (e) {
+    console.error('清除缓存失败:', e)
+  }
+}
+
 /**
  * 用户信息 Hook
  * @param {Object} options - 配置选项
@@ -76,6 +134,16 @@ export function useUserInfo(options = {}) {
     error.value = null
 
     try {
+      // 1. 先尝试从本地缓存获取
+      const cachedUserInfo = getCachedUserInfo()
+      if (cachedUserInfo) {
+        userInfo.value = cachedUserInfo
+        loading.value = false
+        return cachedUserInfo
+      }
+
+      // 2. 发起请求获取用户信息
+      console.log('[UserInfo] 发起请求')
       const authHeader = getAuthHeader()
       const headers = {
         'Content-Type': 'application/json',
@@ -86,17 +154,17 @@ export function useUserInfo(options = {}) {
       }
 
       // 获取 tenant-id（从环境变量或默认值）
-      const tenantId = 
+      const tenantId =
         (typeof import.meta !== 'undefined' && import.meta.env?.VITE_TENANT_ID) ||
         (typeof process !== 'undefined' && process.env?.VITE_TENANT_ID) ||
         '1'
-      
+
       if (tenantId) {
         headers['tenant-id'] = tenantId
       }
 
       const response = await axios.get(apiUrl, { headers })
-      
+
       // 处理响应数据（根据后端返回格式调整）
       // 后端通常返回 { code: 0, data: {...}, msg: '...' } 格式
       let data = null
@@ -112,8 +180,10 @@ export function useUserInfo(options = {}) {
           data = response.data.data || response.data
         }
       }
-      
+
       if (data) {
+        // 3. 将获取到的数据写入本地缓存
+        setCachedUserInfo(data)
         userInfo.value = data
         return data
       }
@@ -147,4 +217,3 @@ export async function getUserInfo(options = {}) {
   const { fetchUserInfo } = useUserInfo(options)
   return await fetchUserInfo()
 }
-