Feat: instances & nodes ui

common/global.d.ts

@@ -0,0 +1,51 @@
+export interface GlobalInstanceConfig {
+  nickname: string;
+  startCommand: string;
+  stopCommand: string;
+  cwd: string;
+  ie: string;
+  oe: string;
+  createDatetime: string;
+  lastDatetime: string;
+  type: string;
+  tag: string[];
+  endTime: string;
+  fileCode: string;
+  processType: string;
+  updateCommand: string;
+  actionCommandList: any[];
+  crlf: number;
+  terminalOption: {
+    haveColor: boolean;
+    pty: boolean;
+    ptyWindowCol: number;
+    ptyWindowRow: number;
+  };
+  eventTask: {
+    autoStart: boolean;
+    autoRestart: boolean;
+    ignore: boolean;
+  };
+  docker: {
+    containerName?: string;
+    image?: string;
+    memory?: number;
+    ports?: string[];
+    extraVolumes?: string[];
+    maxSpace?: number;
+    network?: number;
+    io?: number;
+    networkMode?: string;
+    networkAliases?: string[];
+    cpusetCpus?: string;
+  };
+  pingConfig: {
+    ip?: string;
+    port?: number;
+    type?: number;
+  };
+  extraServiceConfig: {
+    openFrpTunnelId?: string;
+    openFrpToken?: string;
+  };
+}

common/type.ts

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

daemon/src/entity/instance/Instance_config.ts

@@ -1,6 +1,7 @@
 import Instance from "./instance";
 import { IDockerConfig } from "./interface";
 import os from "os";
+import { GlobalInstanceConfig } from "../../../../common/global";
 interface IActionCommand {
   name: string;
   command: string;
@@ -9,7 +10,7 @@ interface IActionCommand {
 type ProcessType = "general" | "docker";
 
 // @Entity
-export default class InstanceConfig {
+export default class InstanceConfig implements GlobalInstanceConfig {
   public nickname = "Undefined";
   public startCommand = "";
   public stopCommand = "^C";

frontend/components.d.ts

@@ -10,10 +10,7 @@ declare module 'vue' {
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
     AButton: typeof import('ant-design-vue/es')['Button']
-    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
-    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
-    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ActionButton: typeof import('./src/components/ActionButton.vue')['default']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
@@ -26,13 +23,10 @@ declare module 'vue' {
     AModal: typeof import('ant-design-vue/es')['Modal']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     AppHeader: typeof import('./src/components/AppHeader.vue')['default']
-    ARadio: typeof import('ant-design-vue/es')['Radio']
-    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
-    ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
@@ -42,11 +36,9 @@ declare module 'vue' {
     ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph']
     ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
-    BaseInfo: typeof import('./src/components/BaseInfo.vue')['default']
     BetweenMenus: typeof import('./src/components/BetweenMenus.vue')['default']
     CardOperator: typeof import('./src/components/CardOperator.vue')['default']
     CardPanel: typeof import('./src/components/CardPanel.vue')['default']
-    DarkThemeButton: typeof import('./src/components/DarkThemeButton.vue')['default']
     DataStatistic: typeof import('./src/components/DataStatistic.vue')['default']
     InnerCard: typeof import('./src/components/InnerCard.vue')['default']
     InputDialogProvider: typeof import('./src/components/InputDialogProvider.vue')['default']

frontend/src/main.ts

@@ -15,14 +15,15 @@ import App from "./App.vue";
 import { userInfoApi } from "./services/apis";
 import { useAppStateStore } from "./stores/useAppStateStore";
 
-const { updateUserInfo } = useAppStateStore();
+(async function () {
+  const { updateUserInfo } = useAppStateStore();
+  const { execute: reqUserInfo } = userInfoApi();
+  const info = await reqUserInfo();
+  updateUserInfo(info.value);
 
-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");
+  const app = createApp(App);
+  app.use(createPinia());
+  app.use(router);
+  app.use(i18n);
+  app.mount("#app");
+})();

frontend/src/services/apis.ts

@@ -1,4 +1,5 @@
 import { useDefineApi } from "@/stores/useDefineApi";
+import type { InstanceDetail } from "@/types";
 import type { BaseUserInfo } from "@/types/user";
 
 // 此处 API 接口可以用中文写注释，后期再统一翻译成英语。
@@ -44,12 +45,19 @@ export const remoteNodeList = useDefineApi<
 // 获取远程实例列表
 export const remoteInstances = useDefineApi<
   {
-    remote_uuid: string;
-    page: number;
-    page_size: number;
-    instance_name?: string;
+    params: {
+      remote_uuid: string;
+      page: number;
+      page_size: number;
+      instance_name?: string;
+    };
   },
-  any // 这里等会再写
+  {
+    maxPage: 1;
+    page: 1;
+    pageSize: 10;
+    data: InstanceDetail[];
+  }
 >({
   url: "/api/service/remote_service_instances"
 });

frontend/src/types/index.ts

@@ -1,3 +1,4 @@
+import type { GlobalInstanceConfig } from "./../../../common/global";
 import type { LayoutCardHeight } from "@/config/originLayoutConfig";
 
 export interface JsonData {
@@ -56,5 +57,5 @@ export interface InstanceDetail {
     playersChart: any[];
     version: string;
   };
-  config: any;
+  config: GlobalInstanceConfig;
 }

frontend/src/widgets/InstanceList.vue

@@ -1,11 +1,13 @@
 <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 { router } from "@/config/router";
+import { remoteInstances } from "@/services/apis";
+import { remoteNodeList } from "../services/apis";
 
 const props = defineProps<{
   card: LayoutCard;
@@ -15,7 +17,20 @@ 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: getNodes, state: nodes } = remoteNodeList();
+const { execute: getInstances, state: instances } = remoteInstances();
+
+onMounted(async () => {
+  await getNodes();
+  await getInstances({
+    params: {
+      remote_uuid: nodes.value?.[0].uuid ?? "",
+      page: 1,
+      page_size: 10,
+      instance_name: ""
+    }
+  });
+});
 
 const toAppDetailPage = (daemonId: string, instanceId: string) => {
   router.push({
@@ -52,16 +67,28 @@ const toAppDetailPage = (daemonId: string, instanceId: string) => {
           </template>
         </BetweenMenus>
       </a-col>
-      <a-col v-for="item in arr" :key="item" :span="24" :md="6">
+      <a-col v-for="item in instances?.data" :key="item" :span="24" :md="6">
         <CardPanel style="height: 100%" @click="toAppDetailPage('11111', '2222')">
-          <template #title>我的程序</template>
+          <template #title>{{ item.config.nickname }}</template>
           <template #body>
-            卡片示例 <br />
-            测试信息
-            <p>
-              我是测试信息113sadklasndfiasbifoashiofhwoifhopiashdoias iofan oiqwoie rhiwoh oiwa
-              doiaw oid owiaydhoia ocaoshd oiadh oiadhioas doiashd oa o123123
-            </p>
+            <a-typography-paragraph>
+              <div>
+                {{ t("状态：") }}
+                {{ item.status }}
+              </div>
+              <div>
+                {{ t("类型：") }}
+                {{ item.config.type }}
+              </div>
+              <div>
+                {{ t("启动时间：") }}
+                {{ item.config.lastDatetime }}
+              </div>
+              <div>
+                {{ t("到期时间：") }}
+                {{ item.config.endTime }}
+              </div>
+            </a-typography-paragraph>
           </template>
         </CardPanel>
       </a-col>