⚡️ 监听数据，响应式更新 #99

src/components/app/t-sidebar.vue

@@ -253,14 +253,19 @@ const userStore = storeToRefs(useUserStore());
 
 const isDevEnv = ref<boolean>(import.meta.env.MODE === "development");
 
-const userInfo = computed(() => {
-  const info = userStore.briefInfo.value;
-  if (info && info.nickname) return info;
-  return {
-    nickname: "未登录",
-    avatar: "/source/UI/lumine.webp",
-  };
+const userInfo = ref({
+  nickname: "未登录",
+  uid: "-1",
+  desc: "请扫码登录",
+  avatar: "/source/UI/lumine.webp",
 });
+
+watch(userStore.briefInfo, (val) => {
+  if (val && val.nickname) {
+    userInfo.value = val;
+  }
+});
+
 const rail = ref(appStore.sidebar.collapse);
 // theme
 const themeGet = computed({
@@ -295,6 +300,9 @@ onMounted(async () => {
   if (TauriWindow.getCurrent().label === "TeyvatGuide") {
     await mhyClient.run();
   }
+  if (userStore.briefInfo.value && userStore.briefInfo.value.nickname) {
+    userInfo.value = userStore.briefInfo.value;
+  }
 });
 
 async function switchTheme(): Promise<void> {
@@ -311,7 +319,8 @@ async function openClient(func: string): Promise<void> {
 
 function login(): void {
   showSnackbar({
-    text: "请前往设置页面扫码登录",
+    text: "请前往设置页面登录！",
+    color: "warn",
   });
 }
 

src/components/config/tc-userBadge.vue

@@ -19,7 +19,7 @@
 import { event, window as windowTauri } from "@tauri-apps/api";
 import type { UnlistenFn } from "@tauri-apps/api/helpers/event";
 import { storeToRefs } from "pinia";
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref, watch } from "vue";
 
 import TGSqlite from "../../plugins/Sqlite";
 import { useAppStore } from "../../store/modules/app";
@@ -58,6 +58,12 @@ onMounted(() => {
   }
 });
 
+watch(userStore.briefInfo, (v) => {
+  if (v && v.nickname) {
+    userInfo.value = v;
+  }
+});
+
 async function toWebLogin(): Promise<void> {
   const confirm = await showConfirm({
     title: "请在子窗口中完成登录操作",
@@ -218,7 +224,6 @@ async function getTokenWeb(cookie: string): Promise<void> {
     text: "登录成功!",
     color: "success",
   });
-  console.log("cookieUser", cookieUser);
 }
 
 async function refreshUser() {