Feat: terminal base info component

frontend/src/hooks/useCardTools.ts

@@ -1,6 +1,9 @@
 import type { LayoutCard } from "@/types";
+import { useRoute } from "vue-router";
 
 export function useLayoutCardTools(card: LayoutCard) {
+  const route = useRoute();
+
   const setMetaValue = <T extends any>(key: string, value: T) => {
     card.meta[key] = value;
   };
@@ -9,8 +12,19 @@ export function useLayoutCardTools(card: LayoutCard) {
     return card.meta[key] ?? def;
   };
 
+  const getMetaOrRouteValue = <T extends any>(key: string, def?: T) => {
+    if (card.meta[key] != null) {
+      return card.meta[key] as T;
+    }
+    if (route.query[key] != null) {
+      return String(route.query[key]);
+    }
+    return def;
+  };
+
   return {
+    getMetaOrRouteValue,
     setMetaValue,
-    getMetaValue,
+    getMetaValue
   };
 }

frontend/src/services/apis/instance.ts

@@ -1,4 +1,6 @@
 import { useDefineApi } from "@/stores/useDefineApi";
+import type { GlobalInstanceConfig } from "../../../../common/global";
+import type { InstanceDetail } from "@/types";
 
 // 此处 API 接口可以用中文写注释，后期再统一翻译成英语。
 
@@ -20,3 +22,16 @@ export const setUpTerminalStreamChannel = useDefineApi<
   url: "/api/protected_instance/stream_channel",
   method: "POST"
 });
+
+export const getInstanceInfo = useDefineApi<
+  {
+    params: {
+      uuid: string;
+      remote_uuid: string;
+    };
+  },
+  InstanceDetail
+>({
+  url: "/api/instance",
+  method: "GET"
+});

frontend/src/widgets/instance/BaseInfo.vue

@@ -1,12 +1,34 @@
 <script setup lang="ts">
 import { useAppStateStore } from "@/stores/useAppStateStore";
 import type { LayoutCard } from "@/types";
-const { state } = useAppStateStore();
+import { useRoute } from "vue-router";
+import { useLayoutCardTools } from "../../hooks/useCardTools";
+import { getInstanceInfo } from "@/services/apis/instance";
+import { onMounted } from "vue";
+import { t } from "@/lang/i18n";
+
 const props = defineProps<{
   card: LayoutCard;
 }>();
 
-const userInfo = state.userInfo;
+const { state } = useAppStateStore();
+const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
+
+const instanceId = getMetaOrRouteValue<string>("instanceId");
+const daemonId = getMetaOrRouteValue<string>("daemonId");
+
+const { execute, state: instanceInfo } = getInstanceInfo();
+
+onMounted(async () => {
+  if (instanceId && daemonId) {
+    await execute({
+      params: {
+        uuid: instanceId,
+        remote_uuid: daemonId
+      }
+    });
+  }
+});
 </script>
 
 <template>
@@ -15,7 +37,28 @@ const userInfo = state.userInfo;
       {{ card.title }}
     </template>
     <template #body>
-      <div>基本信息</div>
+      <a-typography-paragraph>
+        {{ t("名称：") }}{{ instanceInfo?.config.nickname }}
+      </a-typography-paragraph>
+      <a-typography-paragraph>
+        {{ t("类型：") }}{{ instanceInfo?.config.type }}
+      </a-typography-paragraph>
+      <a-typography-paragraph> {{ t("状态：") }}{{ instanceInfo?.status }} </a-typography-paragraph>
+      <a-typography-paragraph>
+        {{ t("最后启动：") }}{{ instanceInfo?.config.lastDatetime }}
+      </a-typography-paragraph>
+      <a-typography-paragraph>
+        {{ t("到期时间：") }}{{ instanceInfo?.config.endTime || "--" }}
+      </a-typography-paragraph>
+      <a-typography-paragraph>
+        {{ t("创建时间：") }}{{ instanceInfo?.config.createDatetime }}
+      </a-typography-paragraph>
+      <a-typography-paragraph>
+        <span>{{ t("输出编码：") }}{{ instanceInfo?.config.nickname }} </span>
+        <span class="ml-6">{{ t("输入编码：") }}{{ instanceInfo?.config.nickname }} </span>
+      </a-typography-paragraph>
+
+      <!-- <p>{{ t("名称:") }}{{ instanceInfo?.config.nickname }}</p> -->
     </template>
   </CardPanel>
 </template>

frontend/src/widgets/instance/Terminal.vue

@@ -8,22 +8,16 @@ import { useRoute } from "vue-router";
 import { useTerminal } from "../../hooks/useTerminal";
 import { onMounted } from "vue";
 import type { InstanceDetail } from "../../types/index";
+import { useLayoutCardTools } from "@/hooks/useCardTools";
 
 const props = defineProps<{
   card: LayoutCard;
 }>();
 
-// 如果 meta 参数包含数值，则应该使用 meta 传递而来的参数。
-// 用户在新增卡片时会被要求补充 meta 参数。
-// 这样的好处是可以实现卡片被放置在任意界面。
-let { instanceId, daemonId } = props.card.meta ?? {};
+const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
 
-// 如果 Meta 中不包含实例 ID 和节点 ID，那么就需要从路由中获取 route 上的参数
-const route = useRoute();
-if (!instanceId || !daemonId) {
-  instanceId = route.query.instanceId ?? "";
-  daemonId = route.query.daemonId ?? "";
-}
+const instanceId = getMetaOrRouteValue<string>("instanceId");
+const daemonId = getMetaOrRouteValue<string>("daemonId");
 
 const quickOperations = arrayFilter([
   // {
@@ -70,10 +64,12 @@ events.on("stdout", (v: InstanceDetail) => {
 });
 
 onMounted(async () => {
-  await execute({
-    instanceId,
-    daemonId
-  });
+  if (instanceId && daemonId) {
+    await execute({
+      instanceId,
+      daemonId
+    });
+  }
 });
 </script>