需要修复商城顶部筛选左右滑动问题

stores/token.js

@@ -1,42 +1,48 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
-import { STORAGE_KEYS } from '@/constants/storage-keys';
-import { getToken, removeToken } from '@/utils/storage';
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { STORAGE_KEYS } from '@/constants/storage-keys'
+import { setTokenData, getToken, removeToken } from '@/utils/storage'
 
 /** 登录状态 */
 export const useTokenStore = defineStore(STORAGE_KEYS.TOKEN, () => {
+  // 从本地存储获取token
+  const token = ref(getToken() || null)
+  const isLogin = ref(!!token.value)
 
-	// 从本地存储获取token
-	const token = ref(getToken() || null);
-	const isLogin = ref(!!token.value);
+  /** 设置token并保存到本地 */
+  const setToken = newToken => {
+    token.value = newToken
+    isLogin.value = true
+		setTokenData(newToken)
+  }
 
-	/** 设置token并保存到本地 */
-	const setToken = (newToken) => {
-		token.value = newToken;
-		isLogin.value = true;
-		setToken(newToken);
-	};
+  /** 清除token */
+  const clearToken = () => {
+    token.value = null
+    isLogin.value = false
+    removeToken()
+  }
 
-	/** 清除token */
-	const clearToken = () => {
-		token.value = null;
-		isLogin.value = false;
-		removeToken()
-	};
+  /** 检查token是否有效（可扩展过期时间判断） */
+  const checkToken = () => {
+    // 简单判断：token存在且不为空
+    return !!token.value
+  }
 
-	/** 检查token是否有效（可扩展过期时间判断） */
-	const checkToken = () => {
-		// 简单判断：token存在且不为空
-		return !!token.value;
-	};
+  /** 验证token是否过期（实际项目中可添加过期时间判断） */
+  const isTokenExpired = () => {
+    // 示例：如果token中包含过期时间，这里可以判断
+    // 例如：const expireTime = parseInt(token.value.split('.')[1]);
+    // return Date.now() > expireTime * 1000;
+    return false // 默认不过期
+  }
 
-	/** 验证token是否过期（实际项目中可添加过期时间判断） */
-	const isTokenExpired = () => {
-		// 示例：如果token中包含过期时间，这里可以判断
-		// 例如：const expireTime = parseInt(token.value.split('.')[1]);
-		// return Date.now() > expireTime * 1000;
-		return false; // 默认不过期
-	};
-
-	return { token, isLogin, setToken, clearToken, checkToken, isTokenExpired };
-})
+  return {
+    token,
+    isLogin,
+    setToken,
+    clearToken,
+    checkToken,
+    isTokenExpired
+  }
+})

stores/user.js

@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia'
+import {
+  getToken,
+  getUserInfoData,
+  setUserInfoData,
+  removeUserInfoData
+} from '@/utils/storage'
+import { useTokenStore } from './token'
+import { getUserData } from '@/api'
+import { ref } from 'vue'
+
+export const useUserStore = defineStore('user', () => {
+  const { clearToken } = useTokenStore()
+
+  /** 用户信息对象 */
+  const userInfo = ref(JSON.parse(getUserInfoData()) || null)
+
+  /**
+   * 获取用户信息（可从缓存或接口）
+   */
+  const fetchUserInfo = async () => {
+    // 示例：先尝试从本地缓存读取
+    const cachedToken = getToken()
+    const cachedUserInfo = getUserInfoData()
+
+    if (cachedToken && cachedUserInfo) {
+      userInfo.value = JSON.parse(cachedUserInfo)
+      return
+    }
+    const res = await getUserData()
+    await setUserInfo(res.data)
+    return
+  }
+
+  /**
+   * 设置用户信息
+   */
+  const setUserInfo = async data => {
+    console.log('存储数据到userInfo==', data)
+    userInfo.value = data
+    // 同步到本地存储
+    setUserInfoData(data)
+  }
+
+  /**
+   * 清除用户信息（退出登录）
+   */
+  const clearUserInfo = () => {
+    userInfo.value = null
+    clearToken()
+    removeUserInfoData()
+  }
+
+  /**
+   * 更新部分用户信息（例如昵称、头像）
+   */
+  const updateUserInfo = partialData => {
+    if (!userInfo.value) return
+    userInfo.value = { ...userInfo.value, ...partialData }
+    setUserInfoData(userInfo.value)
+  }
+
+  return {
+    userInfo: userInfo.value,
+    fetchUserInfo,
+    setUserInfo,
+    clearUserInfo,
+    updateUserInfo
+  }
+})