Feat: operation button

frontend/src/config/index.ts

@@ -219,7 +219,7 @@ export function getLayoutCardPool() {
       title: t("实例快捷方式"),
       width: 3,
       description: t("显示实例状态"),
-      height: LayoutCardHeight.MINI,
+      height: LayoutCardHeight.SMALL,
       category: NEW_CARD_TYPE.INSTANCE,
       params: [
         {

frontend/src/widgets/instance/Shortcut.vue

@@ -1,18 +1,38 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { h, computed } 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 { message } from "ant-design-vue";
+import {
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined,
+  RedoOutlined,
+  CloseOutlined,
+  CloudDownloadOutlined,
+  CodeOutlined
+} from "@ant-design/icons-vue";
+import {
+  openInstance,
+  stopInstance,
+  restartInstance,
+  killInstance,
+  updateInstance
+} from "@/services/apis/instance";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
 import { useInstanceInfo } from "@/hooks/useInstance";
 import { useAppRouters } from "@/hooks/useAppRouters";
 import { parseTimestamp } from "@/tools/time";
+import { arrayFilter } from "@/tools/array";
+import { useLayoutContainerStore } from "@/stores/useLayoutContainerStore";
 
 const props = defineProps<{
   card: LayoutCard;
 }>();
 
+const { containerState } = useLayoutContainerStore();
 const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
 const { toPage } = useAppRouters();
 const instanceId = getMetaOrRouteValue("instanceId");
@@ -24,7 +44,84 @@ const { statusText, isRunning, isStopped, instanceTypeText, instanceInfo } = use
   autoRefresh: true
 });
 
-const toTerminal = () => {
+const operationConfig = {
+  params: {
+    uuid: instanceId || "",
+    remote_uuid: daemonId || ""
+  }
+};
+
+const { isLoading: openLoading, execute: executeOpen } = openInstance();
+const { isLoading: stopLoading, execute: executeStop } = stopInstance();
+const { isLoading: restartLoading, execute: executeRestart } = restartInstance();
+const { isLoading: killLoading, execute: executeKill } = killInstance();
+const { isLoading: updateLoading, execute: executeUpdate } = updateInstance();
+
+const instanceOperations = computed(() =>
+  arrayFilter([
+    {
+      title: t("TXT_CODE_57245e94"),
+      icon: PlayCircleOutlined,
+      click: async () => {
+        await executeOpen(operationConfig);
+        message.success(t("TXT_CODE_e13abbb1"));
+      },
+      loading: openLoading.value,
+      condition: () => isStopped.value
+    },
+    {
+      title: t("TXT_CODE_b1dedda3"),
+      icon: PauseCircleOutlined,
+      click: async () => {
+        await executeStop(operationConfig);
+        message.success(t("TXT_CODE_efb6d377"));
+      },
+      loading: stopLoading.value,
+      condition: () => isRunning.value
+    },
+    {
+      title: t("TXT_CODE_47dcfa5"),
+      icon: RedoOutlined,
+      click: async () => {
+        await executeRestart(operationConfig);
+        message.success(t("实例正在重启"));
+      },
+      loading: restartLoading.value,
+      condition: () => isRunning.value
+    },
+    {
+      title: t("TXT_CODE_7b67813a"),
+      icon: CloseOutlined,
+      click: async () => {
+        await executeKill(operationConfig);
+        message.success(t("TXT_CODE_efb6d377"));
+      },
+      loading: killLoading.value,
+      condition: () => isRunning.value
+    },
+    {
+      title: t("TXT_CODE_40ca4f2"),
+      icon: CloudDownloadOutlined,
+      click: async () => {
+        await executeUpdate({
+          params: {
+            uuid: instanceId || "",
+            remote_uuid: daemonId || "",
+            task_name: "update"
+          },
+          data: {
+            time: new Date().getTime()
+          }
+        });
+        message.success(t("实例正在更新"));
+      },
+      loading: updateLoading.value,
+      condition: () => isStopped.value
+    },
+    {
+      title: t("终端"),
+      icon: CodeOutlined,
+      click: () => {
         toPage({
           path: "/instances/terminal",
           query: {
@@ -32,19 +129,25 @@ const toTerminal = () => {
             instanceId
           }
         });
-};
-
-onMounted(() => {});
+      }
+    }
+  ])
+);
 </script>
 
 <template>
   <div style="width: 100%; position: relative">
-    <CardPanel class="instance-card" @click="toTerminal()">
+    <CardPanel v-if="containerState.isDesignMode" class="instance-card">
+      <template #body>
+        <a-skeleton :paragraph="{ rows: 4 }" />
+      </template>
+    </CardPanel>
+    <CardPanel v-else class="instance-card">
       <template #title>
         {{ instanceInfo?.config.nickname }}
       </template>
       <template #body>
-        <a-typography-paragraph style="line-height: 26px">
+        <a-typography-paragraph>
           <div>
             {{ t("TXT_CODE_e70a8e24") }}
             <span v-if="isRunning" class="color-success">
@@ -72,6 +175,11 @@ onMounted(() => {});
             {{ parseTimestamp(instanceInfo?.config.endTime) }}
           </div>
         </a-typography-paragraph>
+        <a-space warp :size="15">
+          <a-tooltip v-for="item in instanceOperations" :key="item.title" :title="item.title">
+            <a-button :icon="h(item.icon)" :loading="item.loading" @click="item.click" />
+          </a-tooltip>
+        </a-space>
       </template>
     </CardPanel>
   </div>
@@ -79,7 +187,6 @@ onMounted(() => {});
 
 <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);