Feat: user info fetch

frontend/src/App.vue

@@ -6,14 +6,16 @@ import enUS from "ant-design-vue/es/locale/en_US";
 import dayjs from "dayjs";
 import "dayjs/locale/zh-cn";
 import "dayjs/locale/en";
-import { ref } from "vue";
-import { useAppConfigStore } from "./stores/useAppConfigStore";
+import { onMounted, ref, unref } from "vue";
+import { useAppConfigStore } from "@/stores/useAppConfigStore";
+import { useAppStateStore } from "@/stores/useAppStateStore";
 import { theme } from "ant-design-vue";
 
 import InputDialogProvider from "./components/InputDialogProvider.vue";
+import { userInfoApi } from "./services/apis";
 
 const { getCurrentLanguage, isDarkTheme } = useAppConfigStore();
-
+const { state } = useAppStateStore();
 const locale = ref(enUS);
 
 if (getCurrentLanguage() === "zh_CN") {
@@ -34,6 +36,16 @@ if (isDarkUI) {
 } else {
   document.body.classList.add("app-light-theme");
 }
+
+const { execute: reqUserInfo, isLoading } = userInfoApi();
+
+onMounted(async () => {
+  const info = await reqUserInfo();
+  if (info.value) {
+    state.userInfo = info.value;
+  }
+  console.log("用户信息:", state.userInfo);
+});
 </script>
 
 <template>

frontend/src/services/apiService.ts

@@ -46,7 +46,9 @@ class ApiService {
       const endTime = Date.now();
       const reqSpeed = endTime - startTime;
       if (reqSpeed < 100) await this.wait(100 - reqSpeed);
-      this.event.emit(reqId, result.data);
+      let realData = result.data;
+      if (realData.data) realData = realData.data;
+      this.event.emit(reqId, realData);
     } catch (error) {
       this.event.emit(reqId, error);
     }

frontend/src/services/apis.ts

@@ -17,21 +17,6 @@ export const loginUser = useDefineApi<
   method: "POST"
 });
 
-export const userInfoApi = useDefineApi<
-  {
-    // Query
-    params: {
-      uid: string;
-    };
-    // Post
-    data?: {
-      newName: string;
-    };
-  },
-  // Response
-  {
-    id: number;
-  }
->({
-  url: "https://jsonplaceholder.typicode.com/todos/1"
+export const userInfoApi = useDefineApi<any, BaseUserInfo>({
+  url: "/api/auth/"
 });

frontend/src/stores/useApiCache.ts

@@ -12,8 +12,8 @@ export const useDefineApi = <P, T>(baseConfig: RequestConfig = {}) => {
       isLoading,
       state,
       isReady,
-      execute: async (config: P & RequestConfig) => {
-        await execute(0, config);
+      execute: async (config?: P & RequestConfig) => {
+        await execute(0, config ? config : {});
         return state;
       }
     };

frontend/src/stores/useAppConfigStore.ts

@@ -4,7 +4,7 @@ import { createGlobalState } from "@vueuse/core";
 
 export enum THEME {
   LIGHT = "light",
-  DARK = "dark",
+  DARK = "dark"
 }
 
 export const THEME_KEY = "THEME_KEY";
@@ -13,7 +13,7 @@ const defaultTheme = localStorage.getItem(THEME_KEY) || THEME.LIGHT;
 
 export const useAppConfigStore = createGlobalState(() => {
   const appConfig = reactive({
-    theme: defaultTheme as THEME,
+    theme: defaultTheme as THEME
   });
 
   const setTheme = (theme: THEME) => {
@@ -44,6 +44,6 @@ export const useAppConfigStore = createGlobalState(() => {
     getCurrentLanguage,
     isDarkTheme,
     setTheme,
-    getTheme,
+    getTheme
   };
 });

frontend/src/stores/useAppStateStore.ts

@@ -0,0 +1,22 @@
+import { reactive } from "vue";
+import { createGlobalState } from "@vueuse/core";
+import _ from "lodash";
+
+export const useAppStateStore = createGlobalState(() => {
+  const state = reactive<{
+    userInfo: BaseUserInfo | null;
+  }>({
+    userInfo: null
+  });
+
+  const cloneState = () => {
+    if (!state) return null;
+    const tmp = _.cloneDeep(state);
+    return reactive(tmp);
+  };
+
+  return {
+    cloneState,
+    state
+  };
+});

frontend/src/types/user.ts

@@ -0,0 +1,11 @@
+interface BaseUserInfo {
+  uuid: string;
+  userName: string;
+  loginTime: string;
+  registerTime: string;
+  instances: any[];
+  permission: number;
+  token: string;
+  apiKey: string;
+  isInit: boolean;
+}

frontend/src/widgets/Settings.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { LayoutCard } from "@/types";
-import { ref, onMounted } from "vue";
-import { userService } from "@/services/user";
-import { userInfoApi } from "../services/apis";
+import { ref } from "vue";
 
 const props = defineProps<{
   card: LayoutCard;
@@ -11,45 +9,12 @@ const props = defineProps<{
 const formData = ref({
   language: "en_US"
 });
-
-// const { getUserInfo } = userService();
-
-// const { state, isLoading } = getUserInfo("777");
-
-const { execute, isLoading, state, isReady } = userInfoApi();
-
-onMounted(async () => {
-  const info = await execute({
-    params: {
-      uid: ""
-    },
-    data: {
-      newName: "newName"
-    },
-    method: "GET"
-  });
-});
-
-const click = async () => {
-  const d = await execute({
-    params: {
-      uid: ""
-    },
-    data: {
-      newName: "newName"
-    }
-  });
-  d.value!.id = 9999;
-  console.log("XZXZX:", d.value);
-};
 </script>
 
 <template>
   <CardPanel class="CardWrapper" style="height: 100%">
     <template #title>{{ card.title }}</template>
     <template #body>
-      <div @click="() => click()">{{ state }}, {{ isLoading }}，{{ isReady }}</div>
-
       <!-- <div @click="click">{{ t2 }}, {{ t3 }}</div> -->
 
       <a-form :model="formData" layout="vertical">

frontend/src/widgets/UserList.vue

@@ -17,7 +17,7 @@ export interface UserInfo {
   registerTime: number;
 }
 
-const props = defineProps<{
+defineProps<{
   card: LayoutCard;
 }>();