Feat: add instance shortcut

frontend/src/config/index.ts

@@ -33,6 +33,7 @@ import UserInstanceList from "@/widgets/UserInstanceList.vue";
 import ImageManager from "@/widgets/imageManager/index.vue";
 import NewImage from "@/widgets/imageManager/NewImage.vue";
 import Schedule from "@/widgets/instance/Schedule.vue";
+import InstanceShortcut from "@/widgets/instance/Shortcut.vue";
 
 import { NEW_CARD_TYPE } from "../types/index";
 import { ROLE } from "./router";
@@ -69,7 +70,8 @@ export const LAYOUT_CARD_TYPES: { [key: string]: any } = {
   UserInstanceList,
   ImageManager,
   NewImage,
-  Schedule
+  Schedule,
+  InstanceShortcut
 };
 
 export interface NewCardItem extends LayoutCard {
@@ -207,6 +209,35 @@ export function getLayoutCardPool() {
       description: t("TXT_CODE_cf9e259c"),
       height: LayoutCardHeight.SMALL,
       category: NEW_CARD_TYPE.OTHER
+    },
+
+    {
+      id: getRandomId(),
+      permission: ROLE.USER,
+      meta: {},
+      type: "InstanceShortcut",
+      title: t("实例快捷方式"),
+      width: 3,
+      description: t("显示实例状态"),
+      height: LayoutCardHeight.MINI,
+      category: NEW_CARD_TYPE.INSTANCE,
+      params: [
+        {
+          field: "instanceId",
+          label: t("TXT_CODE_e6a5c12b"),
+          type: "string"
+        },
+        {
+          field: "daemonId",
+          label: t("TXT_CODE_72cfab69"),
+          type: "string"
+        },
+        {
+          field: "instance",
+          label: t("TXT_CODE_cb043d10"),
+          type: "instance"
+        }
+      ]
     }
   ];
   return LAYOUT_CARD_POOL;

frontend/src/widgets/instance/Shortcut.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { t } from "@/lang/i18n";
+import CardPanel from "@/components/CardPanel.vue";
+import type { LayoutCard } from "@/types/index";
+import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import { useLayoutCardTools } from "@/hooks/useCardTools";
+import { useInstanceInfo } from "@/hooks/useInstance";
+import { useAppRouters } from "@/hooks/useAppRouters";
+import { parseTimestamp } from "@/tools/time";
+
+const props = defineProps<{
+  card: LayoutCard;
+}>();
+
+const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
+const { toPage } = useAppRouters();
+const instanceId = getMetaOrRouteValue("instanceId");
+const daemonId = getMetaOrRouteValue("daemonId");
+
+const { statusText, isRunning, isStopped, instanceTypeText, instanceInfo } = useInstanceInfo({
+  instanceId,
+  daemonId,
+  autoRefresh: true
+});
+
+const toTerminal = () => {
+  toPage({
+    path: "/instances/terminal",
+    query: {
+      daemonId,
+      instanceId
+    }
+  });
+};
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div style="width: 100%; position: relative">
+    <CardPanel class="instance-card" @click="toTerminal()">
+      <template #title>
+        {{ instanceInfo?.config.nickname }}
+      </template>
+      <template #body>
+        <a-typography-paragraph style="line-height: 26px">
+          <div>
+            {{ t("TXT_CODE_e70a8e24") }}
+            <span v-if="isRunning" class="color-success">
+              <CheckCircleOutlined />
+              {{ statusText }}
+            </span>
+            <span v-else-if="isStopped" class="color-info">
+              {{ statusText }}
+            </span>
+            <span v-else>
+              <ExclamationCircleOutlined />
+              {{ statusText }}
+            </span>
+          </div>
+          <div>
+            {{ t("TXT_CODE_68831be6") }}
+            {{ instanceTypeText }}
+          </div>
+          <div>
+            {{ t("TXT_CODE_d31a684c") }}
+            {{ parseTimestamp(instanceInfo?.config.lastDatetime) }}
+          </div>
+          <div>
+            {{ t("TXT_CODE_ae747cc0") }}
+            {{ parseTimestamp(instanceInfo?.config.endTime) }}
+          </div>
+        </a-typography-paragraph>
+      </template>
+    </CardPanel>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.instance-card {
+  cursor: pointer;
+  &:hover {
+    border: 1px solid var(--color-gray-8);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
+  }
+}
+</style>