Feat: add remote nodes api

common/type.ts

@@ -0,0 +1 @@
+export interface InstanceConfigDetail {}

frontend/src/App.vue

@@ -17,7 +17,7 @@ import { t } from "./lang/i18n";
 import { router } from "./config/router";
 
 const { getCurrentLanguage, isDarkTheme } = useAppConfigStore();
-const { state, updateUserInfo } = useAppStateStore();
+const { state } = useAppStateStore();
 const locale = ref(enUS);
 
 if (getCurrentLanguage() === "zh_CN") {
@@ -51,15 +51,8 @@ import MyselfInfoDialog from "./components/MyselfInfoDialog.vue";
   element.props.size.default = "large";
 });
 
-const { execute: reqUserInfo } = userInfoApi();
-
 onMounted(async () => {
-  try {
-    const info = await reqUserInfo();
-    updateUserInfo(info.value);
-
-    console.log("用户信息:", state.userInfo);
-  } catch (error) {
+  if (!state.userInfo?.token) {
     router.push({
       path: "/login"
     });

frontend/src/main.ts

@@ -12,10 +12,17 @@ import { router } from "./config/router";
 import { i18n } from "@/lang/i18n";
 import App from "./App.vue";
 
-const app = createApp(App);
+import { userInfoApi } from "./services/apis";
+import { useAppStateStore } from "./stores/useAppStateStore";
 
+const { updateUserInfo } = useAppStateStore();
+
+const { execute: reqUserInfo } = userInfoApi();
+const info = await reqUserInfo();
+updateUserInfo(info.value);
+
+const app = createApp(App);
 app.use(createPinia());
 app.use(router);
 app.use(i18n);
-
 app.mount("#app");

frontend/src/services/apiService.ts

@@ -1,10 +1,16 @@
+import { useAppStateStore } from "@/stores/useAppStateStore";
 import type { AxiosRequestConfig } from "axios";
 import axios from "axios";
 import EventEmitter from "events";
 import _ from "lodash";
 
-// Each request must carry the X-Requested-With: XMLHttpRequest header
 axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+axios.interceptors.request.use(async (config) => {
+  const { state } = useAppStateStore();
+  if (!config.params) config.params = {};
+  config.params.token = state.userInfo?.token;
+  return config;
+});
 
 export interface RequestConfig extends AxiosRequestConfig {
   forceRequest?: boolean;
@@ -41,6 +47,7 @@ class ApiService {
 
   private async sendRequest(reqId: string, config: AxiosRequestConfig) {
     try {
+      console.debug(`[ApiService] Request: ${config.url} \n Full AxiosRequestConfig:`, config);
       const startTime = Date.now();
       const result = await axios(config);
       const endTime = Date.now();

frontend/src/services/apis.ts

@@ -1,14 +1,18 @@
 import { useDefineApi } from "@/stores/useDefineApi";
 import type { BaseUserInfo } from "@/types/user";
 
+// 此处 API 接口可以用中文写注释，后期再统一翻译成英语。
+
+// 用户登录
 export const loginUser = useDefineApi<
-  {
-    // Post
-    data: {
-      username: string;
-      password: string;
-    };
-  },
+  | {
+      // Post
+      data: {
+        username: string;
+        password: string;
+      };
+    }
+  | undefined,
   // Response
   {
     id: number;
@@ -18,6 +22,34 @@ export const loginUser = useDefineApi<
   method: "POST"
 });
 
+// 获取当前登录的用户信息
 export const userInfoApi = useDefineApi<any, BaseUserInfo>({
   url: "/api/auth/"
 });
+
+// 获取远程服务列表
+export const remoteNodeList = useDefineApi<
+  any,
+  {
+    available: boolean;
+    ip: string;
+    port: number;
+    remarks: string;
+    uuid: string;
+  }[]
+>({
+  url: "/api/service/remote_services_list"
+});
+
+// 获取远程实例列表
+export const remoteInstances = useDefineApi<
+  {
+    remote_uuid: string;
+    page: number;
+    page_size: number;
+    instance_name?: string;
+  },
+  any // 这里等会再写
+>({
+  url: "/api/service/remote_service_instances"
+});

frontend/src/types/index.ts

@@ -41,5 +41,20 @@ export enum NEW_CARD_TYPE {
   INSTANCE = "INSTANCE",
   USER = "USER",
   NODE = "NODE",
-  OTHER = "OTHER",
+  OTHER = "OTHER"
+}
+
+export interface InstanceDetail {
+  instanceUuid: string;
+  started: number;
+  status: number;
+  info: {
+    currentPlayers: number;
+    fileLock: number;
+    maxPlayers: number;
+    openFrpStatus: boolean;
+    playersChart: any[];
+    version: string;
+  };
+  config: any;
 }

frontend/src/widgets/NodeList.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import CardPanel from "@/components/CardPanel.vue";
 import type { LayoutCard } from "@/types/index";
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { t } from "@/lang/i18n";
 import { SearchOutlined, UserOutlined } from "@ant-design/icons-vue";
 import BetweenMenus from "@/components/BetweenMenus.vue";
+import { remoteNodeList } from "../services/apis";
 
 const props = defineProps<{
   card: LayoutCard;
@@ -14,7 +15,14 @@ const operationForm = ref({
   name: ""
 });
 
-const arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 1, 1, 1, 1, 1, 11, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
+const { execute: getRemoteNodeList, state: nodes } = remoteNodeList();
+
+onMounted(async () => {
+  const res = await getRemoteNodeList({
+    params: {}
+  });
+  console.log("XXZZ:", res);
+});
 </script>
 
 <template>
@@ -55,9 +63,9 @@ const arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 1, 1, 1, 1, 1, 11, 1, 1, 1, 1, 1, 1, 1,
         </a-typography-text>
       </a-col>
 
-      <a-col v-for="item in arr" :key="item" :span="24" :lg="12">
+      <a-col v-for="item in nodes" :key="item" :span="24" :lg="12">
         <CardPanel style="height: 100%">
-          <template #title>我的程序</template>
+          <template #title>{{ item.remarks || item.ip }}</template>
           <template #body>
             卡片示例 <br />
             测试信息