Refactor: useMountComponent().mount()

frontend/components.d.ts

@@ -64,6 +64,8 @@ declare module 'vue' {
     CardError: typeof import('./src/components/CardError.vue')['default']
     CardOperator: typeof import('./src/components/CardOperator.vue')['default']
     CardPanel: typeof import('./src/components/CardPanel.vue')['default']
+    CmdAssistantDialog: typeof import('./src/components/fc/CmdAssistantDialog.vue')['default']
+    CommandDialog: typeof import('./src/components/commandDialog.vue')['default']
     CopyButton: typeof import('./src/components/CopyButton.vue')['default']
     DataStatistic: typeof import('./src/components/DataStatistic.vue')['default']
     Editor: typeof import('./src/components/Editor.vue')['default']
@@ -84,6 +86,6 @@ declare module 'vue' {
     PlaceHolderCard: typeof import('./src/components/PlaceHolderCard.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SelectInstances: typeof import('./src/components/SelectInstances.vue')['default']
+    SelectInstances: typeof import('./src/components/fc/SelectInstances.vue')['default']
   }
 }

frontend/src/components/NewCardList/params.vue

@@ -5,7 +5,7 @@ import type { MapData } from "@/types/index";
 import type { FormInstance } from "ant-design-vue";
 import { BulbOutlined } from "@ant-design/icons-vue";
 import { $t as t } from "@/lang/i18n";
-import { useSelectInstances } from "@/hooks/useSelectInstances";
+import { useSelectInstances } from "@/components/fc";
 
 const open = ref(false);
 const card = ref<LayoutCard>();

frontend/src/components/fc/CmdAssistantDialog.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { MountComponent } from "@/types";
+
+import { t } from "@/lang/i18n";
+
+const props = defineProps<MountComponent>();
+
+const open = ref(true);
+
+const cancel = async () => {
+  open.value = false;
+  if (props.destroyComponent) props.destroyComponent();
+};
+
+const submit = async () => {
+  if (props.emitResult) props.emitResult("");
+  await cancel();
+};
+</script>
+
+<template>
+  <a-modal
+    v-model:open="open"
+    centered
+    :mask-closable="false"
+    :title="t('命令助手')"
+    :ok-text="t('确定')"
+    :cancel-text="t('TXT_CODE_a0451c97')"
+    @ok="submit"
+    @cancel="cancel"
+  >
+    <div>A</div>
+  </a-modal>
+</template>
+
+<style lang="scss" scoped>
+.instance-card {
+  cursor: pointer;
+}
+.instance-card:hover {
+  border: 1px solid var(--color-gray-8);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
+}
+</style>

frontend/src/components/fc/SelectInstances.vue

@@ -14,7 +14,7 @@ import { remoteInstances, remoteNodeList } from "@/services/apis";
 import { message } from "ant-design-vue";
 import { computeNodeName } from "@/tools/nodes";
 import { throttle } from "lodash";
-import { useScreen } from "../hooks/useScreen";
+import { useScreen } from "@/hooks/useScreen";
 
 const props = defineProps<MountComponent>();
 const { isPhone } = useScreen();

frontend/src/components/fc/index.ts

@@ -0,0 +1,13 @@
+import { useMountComponent } from "@/hooks/useMountComponent";
+import type { UserInstance } from "@/types/user";
+
+import SelectInstances from "@/components/fc/SelectInstances.vue";
+import CmdAssistantDialog from "@/components/fc/CmdAssistantDialog.vue";
+
+export async function useSelectInstances() {
+  return await useMountComponent().mount<UserInstance[]>(SelectInstances);
+}
+
+export async function useCmdAssistantDialog() {
+  return await useMountComponent().mount<string>(CmdAssistantDialog);
+}

frontend/src/hooks/useMountComponent.ts

@@ -1,7 +1,7 @@
 import { createApp, type Component } from "vue";
 import { sleep } from "@/tools/common";
 
-export function useMountComponent() {
+export function useMountComponent(data: Record<string, any> = {}) {
   let isOpen = false;
   const mount = <T>(component: Component) => {
     if (isOpen) return;
@@ -9,9 +9,9 @@ export function useMountComponent() {
     return new Promise<T>((resolve, reject) => {
       const div = document.createElement("div");
       document.body.appendChild(div);
-
       const app = createApp(component, {
-        async destroyComponent(delay = 0) {
+        ...data,
+        async destroyComponent(delay = 1000) {
           await sleep(delay);
           app.unmount();
           div.remove();

frontend/src/hooks/useSelectInstances.ts

@@ -1,8 +0,0 @@
-import { useMountComponent } from "./useMountComponent";
-import SelectInstances from "@/components/SelectInstances.vue";
-import type { UserInstance } from "@/types/user";
-
-export function useSelectInstances() {
-  const { mount } = useMountComponent();
-  return mount<UserInstance[]>(SelectInstances);
-}

frontend/src/types/index.ts

@@ -195,8 +195,8 @@ export interface QuickStartTemplate {
 }
 
 export interface MountComponent {
-  destroyComponent: Function;
-  emitResult: Function;
+  destroyComponent(delay?: number): void;
+  emitResult(data?: any): void;
 }
 
 export interface Schedule {

frontend/src/widgets/instance/dialogs/InstanceDetails.vue

@@ -15,6 +15,7 @@ import { Dayjs } from "dayjs";
 import _ from "lodash";
 import { GLOBAL_INSTANCE_NAME } from "../../../config/const";
 import { dayjsToTimestamp, timestampToDayjs } from "../../../tools/time";
+import { useCmdAssistantDialog } from "@/components/fc";
 
 interface FormDetail extends InstanceDetail {
   dayjsEndTime?: Dayjs;
@@ -157,6 +158,11 @@ const encodeFormData = () => {
   throw new Error("Ref Options is null");
 };
 
+const openCmdAssistDialog = async () => {
+  const cmd = useCmdAssistantDialog();
+  console.debug("cmd:", cmd);
+};
+
 defineExpose({
   openDialog
 });
@@ -238,7 +244,7 @@ defineExpose({
                   :rows="3"
                   style="min-height: 40px"
                 />
-                <a-button type="default" style="height: auto">
+                <a-button type="default" style="height: auto" @click="openCmdAssistDialog">
                   {{ t("TXT_CODE_2728d0d4") }}
                 </a-button>
               </a-input-group>

frontend/src/widgets/user/AccessSettings.vue

@@ -11,7 +11,7 @@ import { arrayFilter } from "@/tools/array";
 import { userInfoApiAdvanced } from "@/services/apis";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
 import { updateUserInstance } from "@/services/apis";
-import { useSelectInstances } from "@/hooks/useSelectInstances";
+import { useSelectInstances } from "@/components/fc";
 import { message } from "ant-design-vue";
 import { INSTANCE_STATUS } from "@/types/const";