优化pc端 --初步优化

frontend/src/stores/session.ts

@@ -1,67 +1,80 @@
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 
-import { fetchMe, loginWithSms, updateMe, type AuthUser } from '@/api/auth'
+import { fetchMe, loginWithSms, updateMe, type AuthUser } from "@/api/auth";
 
-export const useSessionStore = defineStore('session', {
+export const useSessionStore = defineStore("session", {
   state: () => ({
-    token: localStorage.getItem('access_token') || '',
-    refreshToken: localStorage.getItem('refresh_token') || '',
-    userId: Number(localStorage.getItem('user_id') || 0),
-    phone: localStorage.getItem('phone') || '',
-    nickname: localStorage.getItem('nickname') || '',
-    avatarUrl: localStorage.getItem('avatar_url') || '',
-    realnameStatus: localStorage.getItem('realname_status') || 'unknown',
+    token: localStorage.getItem("access_token") || "",
+    refreshToken: localStorage.getItem("refresh_token") || "",
+    userId: Number(localStorage.getItem("user_id") || 0),
+    phone: localStorage.getItem("phone") || "",
+    nickname: localStorage.getItem("nickname") || "",
+    avatarUrl: localStorage.getItem("avatar_url") || "",
+    realnameStatus: localStorage.getItem("realname_status") || "unknown",
   }),
+  getters: {
+    isLoggedIn: (state) => Boolean(state.token),
+    displayName: (state) =>
+      state.nickname ||
+      (state.phone
+        ? `用户${state.phone.slice(-6)}`
+        : `用户${state.userId || 0}`),
+    avatarText: (state) => (state.nickname || state.phone || "U").slice(0, 1),
+  },
   actions: {
     async login(phone: string, code: string) {
-      const result = await loginWithSms(phone, code)
-      this.applySession(result.user, result.tokens.access_token, result.tokens.refresh_token)
-      return result
+      const result = await loginWithSms(phone, code);
+      this.applySession(
+        result.user,
+        result.tokens.access_token,
+        result.tokens.refresh_token
+      );
+      return result;
     },
     async loadMe() {
-      const user = await fetchMe()
-      this.applyUser(user)
-      return user
+      const user = await fetchMe();
+      this.applyUser(user);
+      return user;
     },
     async updateProfile(payload: { nickname: string; avatar_url: string }) {
-      const user = await updateMe(payload)
-      this.applyUser(user)
-      return user
+      const user = await updateMe(payload);
+      this.applyUser(user);
+      return user;
     },
     logout() {
-      this.token = ''
-      this.refreshToken = ''
-      this.userId = 0
-      this.phone = ''
-      this.realnameStatus = 'unknown'
-      localStorage.removeItem('access_token')
-      localStorage.removeItem('refresh_token')
-      localStorage.removeItem('user_id')
-      localStorage.removeItem('phone')
-      localStorage.removeItem('nickname')
-      localStorage.removeItem('avatar_url')
-      localStorage.removeItem('realname_status')
+      this.token = "";
+      this.refreshToken = "";
+      this.userId = 0;
+      this.phone = "";
+      this.realnameStatus = "unknown";
+      localStorage.removeItem("access_token");
+      localStorage.removeItem("refresh_token");
+      localStorage.removeItem("user_id");
+      localStorage.removeItem("phone");
+      localStorage.removeItem("nickname");
+      localStorage.removeItem("avatar_url");
+      localStorage.removeItem("realname_status");
     },
     applySession(user: AuthUser, accessToken: string, refreshToken: string) {
-      this.token = accessToken
-      this.refreshToken = refreshToken
-      this.userId = user.id
-      localStorage.setItem('access_token', accessToken)
-      localStorage.setItem('refresh_token', refreshToken)
-      localStorage.setItem('user_id', String(user.id))
-      this.applyUser(user)
+      this.token = accessToken;
+      this.refreshToken = refreshToken;
+      this.userId = user.id;
+      localStorage.setItem("access_token", accessToken);
+      localStorage.setItem("refresh_token", refreshToken);
+      localStorage.setItem("user_id", String(user.id));
+      this.applyUser(user);
     },
     applyUser(user: AuthUser) {
-      this.userId = user.id
-      localStorage.setItem('user_id', String(user.id))
-      this.phone = user.phone
-      localStorage.setItem('phone', user.phone)
-      this.nickname = user.nickname
-      localStorage.setItem('nickname', user.nickname)
-      this.avatarUrl = user.avatar_url
-      localStorage.setItem('avatar_url', user.avatar_url)
-      this.realnameStatus = user.realname_status
-      localStorage.setItem('realname_status', user.realname_status)
+      this.userId = user.id;
+      localStorage.setItem("user_id", String(user.id));
+      this.phone = user.phone;
+      localStorage.setItem("phone", user.phone);
+      this.nickname = user.nickname;
+      localStorage.setItem("nickname", user.nickname);
+      this.avatarUrl = user.avatar_url;
+      localStorage.setItem("avatar_url", user.avatar_url);
+      this.realnameStatus = user.realname_status;
+      localStorage.setItem("realname_status", user.realname_status);
     },
   },
-})
+});